2017-03-01 3 views
1

순수한 CSS에 의해 의 내부에있는 유사 요소에 요소 z-index의 값을 표시하려고합니다.css 변수 유형을 변환하는 방법은 무엇입니까?

나는 CSS 변수를 사용하기로 결정했습니다. 그러나 문제는 z-index은 숫자이지만 content은 문자열입니다. 가치를 어떻게 내포 할 수 있습니까?

예 : pz-index: var(--z) 인 경우 divz-index: 8입니다. pz-index을 사용하고 after을 동시에 표시하고 싶습니다. 내가 어떻게 해?

p { 
 
    position: relative; 
 
    z-index: var(--z); 
 
    background: silver; 
 
} 
 

 
p:after { 
 
    content: var(--z); 
 
    color: red; 
 
} 
 

 
div { 
 
    background: red; 
 
    z-index: 8; 
 
} 
 

 
/* just some styling and positioning stuff bellow */ 
 

 
body { 
 
    margin: 0; 
 
} 
 

 
p { 
 
    margin: 1em .5em; 
 
    padding: 0 .5em 0 3.5em; 
 
    line-height: 2em; 
 
} 
 

 
div { 
 
    position: absolute; 
 
    top: .5em; 
 
    left: 1em; 
 
    height: 6em; 
 
    width: 2em; 
 
}
<p style="--z: 9"> 
 
    I have correct z-index, but have no :after 
 
</p> 
 

 
<p style="--z: '9'"> 
 
    I have no z-index, but have :after 
 
</p> 
 

 
<div></div>

PS : Same question in Russian.

답변

1

찾을 흥미로운 해킹 :

p:after { 
    counter-reset: z var(--z); 
    content: counter(z); 
} 

전체 코드 :

p { 
 
    position: relative; 
 
    z-index: var(--z); 
 
    background: silver; 
 
} 
 

 
p:after { 
 
    content: var(--z); 
 
    color: red; 
 
} 
 

 
p.solution:after { 
 
    counter-reset: z var(--z); 
 
    content: counter(z); 
 
    color: red; 
 
} 
 

 
div { 
 
    background: red; 
 
    z-index: 8; 
 
} 
 

 
/* just some styling and positioning stuff bellow */ 
 

 
body { 
 
    margin: 0; 
 
} 
 

 
p { 
 
    margin: 1em .5em; 
 
    padding: 0 .5em 0 3.5em; 
 
    line-height: 2em; 
 
} 
 

 
div { 
 
    position: absolute; 
 
    top: .5em; 
 
    left: 1em; 
 
    height: 9em; 
 
    width: 2em; 
 
}
<p style="--z: 9"> 
 
    I have correct z-index, but have no :after 
 
</p> 
 

 
<p style="--z: '9'"> 
 
    I have no z-index, but have :after 
 
</p> 
 

 
<p class="solution" style="--z: 9"> 
 
    I have both z-index and :after 
 
</p> 
 

 
<div></div>