의사 요소 이후 CSS:before/:fter pseudo-elements에서 이미지의 높이를 변경할 수 있습니까?

의사 요소 이후 CSS:before/:fter pseudo-elements에서 이미지의 높이를 변경할 수 있습니까?

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

<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를 순수하게 사용하는 것보다 더 호환성이 있을 것처럼 들립니다.제 원래 질문에 대한 답은 "당신은 가끔 그것을 할 수 있습니다."인 것 같습니다.

조정은 허용됩니다.그러나 블록의 너비와 높이를 지정해야 합니다.

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

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

하세요에 하세요.:after의사 element는 생성된 이미지를 포함하는 상자입니다.이미지의 스타일을 지정할 방법은 없지만 상자의 스타일을 지정할 수 있습니다.

다음은 하나의 아이디어에 불과하며, 위의 해결책이 더 실용적입니다.

.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은 첫 번째 이미지의 크기를 조정하지만 두 번째 이미지의 고유 치수를 사용합니다.

firefox와 ie는 첫번째를 지원하지 않고, 두번째는 고유 차원을 사용합니다.

오페라는 두 경우 모두에 고유 차원을 사용합니다.

(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; 효과가 없는

포지션 또한 프론트엔드 기본에 따라 매우 이상하게 작동하므로 주의해야 합니다.

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

네, 원래 질문은 8년 전에 했지만, 지금도 늘 그래왔던 것처럼 관련성이 있습니다.이제, 저는 :: 전에, 약 일주일 동안 :: 후의 이 문제에 대해 기둥에서 기둥으로 계속 글을 올리고 있습니다. 그리고 그것은 저를 궁지로 몰아넣고 있습니다.

이 페이지와 주제에 대한 다른 사람들로부터 - 나는 마침내 그것을 모아서 유사 태그에 이미지의 크기를 줄였습니다.

** running note.colnav는 내부에 <hrefs> 집합이 있는 <UL > 및 <LI > 태그 집합을 보유하는 제 컨테이너 클래스일 뿐입니다.

아래는 코드(완료)입니다.

.colnav li.nexus-button a:hover:before {   
    background-image: url('/images/fleur-de-lis.png');
    background-size: 90px 20px;
    background-repeat: no-repeat;
    width: 130px;
    height: 20px;
    margin-left: -120px;
    margin-top: -3px;
    transform: scale(1.5);
    content: "";
    position: absolute;
}

이미지 파일은 120 x 80이었고, 그림은 90 x 20으로 축소되었습니다. 그 다음 html href 태그 뒤에 꽤 잘 어울렸고, 모든 것이 그 위치와 함께 왔습니다. 마지막에 절대 문장입니다.

여기 또 다른 (작동하는) 해결책이 있습니다: 이미지 크기를 원하는 크기로 조정하기만 하면 됩니다:)

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

pdf.png가 20 px * 10 px가 되어야 작동합니다.CSS에 있는 20px/10px는 블록 다음에 오는 요소들이 이미지를 엉망으로 만들지 않도록 블록의 크기를 주기 위해 여기에 있습니다.

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

요즘에는 flexbox를 사용하면 코드를 크게 단순화할 수 있으며 필요에 따라 1개의 파라미터만 조정할 수 있습니다.

.pdflink:after {
    content: url('/images/pdf.png');
    display: inline-flex;
    width: 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:"";
}

를 .zoom소유물.이 jsfiddle 확인

배경 이미지의 너비와 높이를 설정하는 대신 요소 자체의 너비와 높이를 설정할 수 있습니다.

.pdflink::after {
  content: '';
  background-image: url(/images/pdf.png);
  width: 100px;
  height: 100px;
  background-size: contain;
}

글꼴 크기 조절 너비를 사용했습니다.

.home_footer1::after {
color: transparent;
background-image: url('images/icon-mail.png');      
background-size: 100%;      
content: ".......................................";
font-size: 30pt;
}

다음과 같이 Before 또는 After 요소의 높이 또는 너비를 변경할 수 있습니다.

.element:after {
  display: block;
  content: url('your-image.png');
  height: 50px; //add any value you need for height or width
  width: 50px;
}

content: "";
background-image: url("yourimage.jpg");
background-size: 30px, 30px;

이것을 직접 발견하고 다음과 같은 것을 발견했습니다. 컨텐츠를 다음과 같이 대체하는 경우url('/path/to/svg'), 당신은 실제로 이미지의 크기를 설정할 수 있습니다.width. 유일한 주의 사항은 루트 컨텍스트와 관련된 차원을 사용해야 한다는 것입니다.vh,vw,rem,기타.

#replaced {
content: url('https://www.svgrepo.com/download/507146/alert-triangle.svg');
width: 5.3125rem;
}

<ul>
<li>List item 1</li>
<li id="replaced">List item 2</li>
<li>List item 3</li>
</ul>

위의 토막글을 가지고 놀고 너비를 변경하여 교체된 항목의 크기에 어떤 영향을 미치는지 확인할 수 있습니다.1rem는 (보통)16px(기본 글꼴 크기:<html>element), 그래서 수학은your_desired_width에 의해 나누어진16너비(의 경우)와 같음rem. 적어도 파이어폭스와 크롬에서는 지속적으로 작동하지만 사파리는 확인하지 않았습니다.

개체를 변환할 때 CSS scale 속성을 사용할 수 있으며 position:absolute를 사용할 경우 transform-origin 속성을 사용할 수 있습니다.

.head-inner .confeti:after {content: url(img/flag2.png); position: absolute; right: 0; top: 0; transform: scale(.6); transform-origin: right top;}

언급URL : https://stackoverflow.com/questions/8977957/can-i-change-the-height-of-an-image-in-css-before-after-pseudo-elements