[css] CSS : before / : after pseudo-elements에서 이미지의 높이를 변경할 수 있습니까?

Program / 글쓴이

이미지를 사용하여 특정 파일 형식에 대한 링크를 장식한다고 가정합니다. 링크를 다음과 같이 선언 할 수 있습니다.

<a href='foo.pdf' class='pdflink'>A File!</a>

그런 다음 CSS를

.pdflink:after { content: url('/images/pdf.png') }

이제 pdf.png링크 텍스트에 적합한 크기가 아닌 경우를 제외하고 는 잘 작동 합니다.

브라우저에 :after이미지 크기를 조정하도록 지시 하고 싶지만 인생의 올바른 구문을 찾을 수는 없습니다. 또는 크기 조정이 불가능한 배경 이미지와 같은 것입니까?

ETA : 나는 a) 소스 이미지를 서버 크기의 “올바른”크기로 조정하거나 b) IMG 태그를 인라인으로 제공하기 위해 마크 업을 변경하려고합니다. 나는 그 두 가지를 피하려고 노력했지만 CSS로 순수하게 작업하는 것보다 더 호환되는 것처럼 들립니다. 내 원래의 질문에 대한 대답은 “당신이 할 수있을 것으로 보인다 일종의 때로는 그것을”.

답변

조정 background-size이 허용됩니다. 그러나 여전히 블록의 너비와 높이를 지정해야합니다.

.pdflink:after {
    background-image: url('/images/pdf.png');
    background-size: 10px 20px;
    display: inline-block;
    width: 10px; 
    height: 20px;
    content:"";
}

MDN의 전체 호환성 표를 참조하십시오 .

답변

점을 유의 :after가상 요소가 교대로 생성 된 이미지를 포함하는 박스이다. 이미지의 스타일을 지정할 수는 없지만 상자의 스타일을 지정할 수 있습니다.

다음은 단지 아이디어 일 뿐이며 위 의 해결책 이 더 실용적입니다.

.pdflink:after {
    content: url('/images/pdf.png');
    transform: scale(.5);
}

http://jsfiddle.net/Nwupm/

단점 : 이미지의 본질적인 크기를 알아야하며 ATM을 제거 할 수없는 공백이 생깁니다.

답변

내 다른 대답은 분명히 잘 이해되지 않았으므로 두 번째 시도는 다음과 같습니다.

질문에 대답하는 두 가지 방법이 있습니다.

실용적 (단지 사진을 보여주세요!)

:after의사 선택기를 잊어 버리고 다음과 같이하십시오.

.pdflink {
    min-height: 20px;
    padding-right: 10px;
    background-position: right bottom;
    background-size: 10px 20px;
    background-repeat: no-repeat;
}

이론적 인

문제는 생성 된 컨텐츠 를 스타일링 할 수 있습니까 ? 대답은 : 아니요, 할 수 없습니다. 이 문제 에 대한 W3C 메일 링리스트 에 대한 긴 토론 이 있었지만 지금까지는 해결책이 없습니다.

생성 된 컨텐츠는 생성 된 상자로 렌더링되며 해당 상자의 스타일을 지정할 수 있지만 컨텐츠는 그렇게 할 수 없습니다 . 브라우저마다 동작이 매우 다릅니다

#foo         {content: url("bar.jpg"); width: 42px; height:42px;}  
#foo::before {content: url("bar.jpg"); width: 42px; height:42px;}

Chrome은 첫 번째 크기를 조정하지만 두 번째 이미지의 고유 크기를 사용합니다.

파이어 폭스와 즉, 첫 번째를 지원하지 않으며 두 번째에는 고유 치수를 사용하십시오.

opera는 두 경우 모두에 고유 한 차원을 사용합니다.

( http://lists.w3.org/Archives/Public/www-style/2011Nov/0451.html에서 )

마찬가지로, 브라우저는 http://jsfiddle.net/Nwupm/1/ 과 같이 여러 요소가 생성되는 결과에 대해 매우 다른 결과를 보여줍니다 . CSS3는 아직 초기 개발 단계에 있으며이 문제는 아직 해결되지 않았습니다.

답변

이미지 대신 배경을 사용해야합니다.

.pdflink:after {
  content: "";
  background-image:url(your-image-url.png);
  background-size: 100% 100%;
  display: inline-block;

  /*size of your image*/
  height: 25px;
  width:25px;

  /*if you want to change the position you can use margins or:*/
  position:relative;
  top:5px;

}

답변

diplay: block; 효과가 없다

positionin은 또한 프론트 엔드 기초에 매우 이상하게 작동하므로주의하십시오.

body:before{ 
    content:url(https://i.imgur.com/LJvMTyw.png);
    transform: scale(.3);
    position: fixed;
    left: 50%;
    top: -6%;
    background: white;
}

답변

여기에 또 다른 (작동하는) 해결책이 있습니다. 이미지를 원하는 크기로 조정하십시오. 🙂

.pdflink:after {
    display: block;
    width: 20px;
    height: 10px;
    content:url('/images/pdf.png');
}

이것이 작동하려면 pdf.png가 20px * 10px이어야합니다. CSS의 20px / 10px는 블록의 크기를 제공하기 위해 여기에 있으므로 블록 뒤에 오는 요소가 이미지와 엉망이되지 않습니다.

원본 이미지의 사본을 원래 크기로 유지하는 것을 잊지 마십시오

답변

.pdflink:after {
    background-image: url('/images/pdf.png');
    background-size: 10px 20px;
    width: 10px;
    height: 20px;
    padding-left: 10px;// equal to width of image.
    margin-left:5px;// to add some space for better look
    content:"";
}