의사 요소가 표시되지 않은 후에 CSS 콘텐츠가있는 div

Question

필자는 완료해야하는 POC가 있으며 제품 스타일을 업데이트하는 데 CSS 만 사용할 수 있습니다. CSS 컨텐츠 속성을 사용하여 제품의 이미지 중 하나를 로고로 대체했습니다.

이 로고 뒤에 표시 될 전화 번호가있는 간단한 문자열을 추가해야합니다. 이 작업을 수행하기 위해 의사 요소 인 :after을 사용하려고했습니다. 이것은 div의 내용이 비어있는 경우에만 작동합니다 (로고가 제거됨).

.demo { 
 
    content: url('http://placehold.it/350x150') 
 
} 
 

 
.demo:after { 
 
    content: 'test'; 
 
    display: inline-block; 
 
}

<div class="demo"></div>

둘 다 규칙에 대한 height 및 width 코딩 displayinline-block에 하드를 변화 노력했다. 본질적으로 내가 발견 할 수있는 모든 것. 어떤 도움이라도 대단히 감사하겠습니다. 여기

JSFiddle : 당신은 CSS에서 배경을 교체하고 HTML에 이미지로 넣을 수 https://jsfiddle.net/qykbjznm/

Answer 1

content 속성은 요소 내의 모든 콘텐츠를 대체합니다. 비 의사 선택기에 content을 추가하면 해당 내용이 ::before 및 ::after 의사 선택기를 대체합니다.

::before 및 ::after 의사 선택기에서만 content 속성을 사용하여이 작업을 시도해보십시오.

.demo:before { 
 
    content: url('http://placehold.it/350x150') 
 
} 
 

 
.demo:after { 
 
    content: 'some text'; 
 
    display: block; 
 
}

<div class="demo"></div>

Answer 2

:

.demo::after { 
 
    content: 'test'; 
 
    display: inline-block; 
 
}

<div class="demo"> 
 
    <img src='http://placehold.it/350x150'/> 
 
</div>

심지어 이렇게 :

.demo { 
 
    background: url('http://placehold.it/350x150'); 
 
    height:150px; 
 
    width:350px; 
 
} 
 

 
.demo::after { 
 
    content: 'test'; 
 
}

<div class="demo"></div>

두 가지 다른 결과가 있습니다.

Answer 3

나는 당신의 JSFiddle 주변에 조금 엉망하고 난 현재 DIV 아래의 전화 번호 표시를 만드는 유일한 방법은 다른 사업부 만드는 것입니다 발견 :

<div class="demo"></div> 
<div class="demo2"></div> 
<style> 
    .demo { 
    content: url('http://placehold.it/350x150'); 
    height:150px; 
    width:350px; 
    } 

    .demo2:before { 
    content: "test"; 
    } 
</style> 

을

Answer 4

일부 브라우저는 not being supported in CSS2에도 불구하고 실제 요소에 content 속성을 적용합니다. css-content-3는 이것을 허용 할 것으로 예상되지만, 레벨 3 스펙이 표준이 될 때까지는 (실제로는 마지막으로 년에 발생하지 않았다는 것을 고려하여) 또 다른 몇 년 동안 현실적으로 일어나지 않을 것입니다. content 실제 요소에 비표준 동작으로 간주되어야합니다.

content 속성의 값이 that image is inserted as replaced content 인 경우 그리고이를 실제 요소에 적용하면 요소에 ::before 및 ::after 의사 요소가 없게됩니다.이것이 귀하의 ::after 의사 요소가 나타나지 않는 이유입니다.

위에서 언급 한 것처럼 이미지는 요소 자체가 아닌 요소의 ::before 의사 요소에 적용하면됩니다.