포함하는 요소에 상대적인 유사 요소의 너비를 정의하는 방법

Question

특정 단어에 이미지 원을 배치하고 싶습니다. 잘 작동

.Subjekt:before { 
    position: absolute; 
    background-image: url(images/markup/einkreisen1.png); 
    background-size: 100% 100%; 
    display: inline-block; 
    margin-left: -20px; 
    width: 100px; 
    height: 50px; 
    content:""; 
} 

와

<p> 
    <span class="Subjekt">Vater</span> 
    <span class="Praedikat">bringt</span> 
</p> 

. 하지만 고정 된 크기입니다.

.Subjekt 요소를 기준으로 의사 요소의 너비를 정의하는 방법이 있습니까?

Answer 1

Subjekt 요소에 대해 before 요소에 대해 relative 위치 지정을 사용하십시오.

1. 이 Subjekt에 대한 relative 위치를 보내기

   아래의 예를 참조하십시오.

2. width 및 Subjekt

3. (I 너무 기본 디스플레이 유형 - 너비 또는 높이를하지 것이다 inline 요소 - 같은 요소 inline-block로 설정합니다)의 height 다양한 시도 before 요소의 height 및 width을 100 %로 설정하십시오.

4. 나는 before 뒤에 z-index: -1을 주었다.

   .Subjekt { 
    
       position: relative; 
    
       width: 200px; 
    
       height: 200px; 
    
       display: inline-block; 
    
   } 
    
   .Subjekt:before { 
    
       position: absolute; 
    
       background-image: url(http://placehold.it/100x100); 
    
       background-size: 100% 100%; 
    
       display: inline-block; 
    
       width: 100%; 
    
       height: 100%; 
    
       content:""; 
    
       z-index: -1; 
    
   }

   <p> 
    
       <span class="Subjekt">Vater</span> 
    
       <span class="Praedikat">bringt</span> 
    
   </p>

당신이 여기에서 앞으로 취할 수 있기를 바랍니다. 이것에 대한 귀하의 의견을 알려주십시오. 감사!