"텍스트 장식" 및 ":after" 의사 요소 다시 살펴보기

StackOverflow https://stackoverflow.com/questions/1238881

문제

다시 묻고 있어요 이 질문 내 경우에는 답변이 작동하지 않았기 때문입니다.

인쇄 매체용 스타일시트에서 다음을 사용하여 모든 링크 뒤에 URL을 추가하고 싶습니다. :after 의사급.

a:after {
    content: " <" attr(href) ">";
    text-decoration: none;
    color: #000000;
}

Firefox(아마도 Chrome이지만 IE8은 아님)에서는 text-decoration: none 무시되고 밑줄이 URL 하단에 걸쳐 보기 좋게 늘어납니다.그만큼 color 그러나 URL에 대해서는 검은색으로 올바르게 설정되어 있습니다.만들 수 있는 방법이 있나요? text-decoration 일하다?

그만큼 원래 질문 가변 너비 텍스트 대신 고정 크기 이미지를 추가했습니다.그 답변은 텍스트 장식 속성을 사용할 필요가 없도록 패딩과 배경 이미지를 사용합니다.콘텐츠가 가변 폭 텍스트인 경우에도 여전히 해결책을 찾고 있습니다.

도움이 되었습니까?

해결책

IE8의 :before 및 :after 의사 요소 구현이 올바르지 않습니다.Firefox, Chrome 및 Safari는 모두 CSS 2.1 사양에 따라 이를 구현합니다.

5.12.3 :before 및 :after 의사 요소

': 이전'및 ': 후'의사 요소가 사용될 수 있습니다. 끼워 넣다 이전 또는 이후에 생성된 콘텐츠 요소의 내용.생성 된 텍스트 섹션에 설명되어 있습니다.

...

캐스케이딩 스타일 시트 레벨 2 개정 1(CSS 2.1) 사양

사양에는 콘텐츠가 앞이나 뒤에 삽입되어야 함을 나타냅니다. 요소의 내용, 요소가 아닌 (즉.<요소>컨텐츠:이전 콘텐츠 내용:이후</요소>).따라서 Firefox 및 Chrome에서 발생하는 텍스트 장식은 삽입된 콘텐츠가 아니라 삽입된 콘텐츠를 포함하는 상위 앵커 요소에 있습니다.

귀하의 옵션은 이전 질문에서 제안한 배경 이미지/패딩 기술을 사용하거나 앵커 요소를 범위 요소로 래핑하고 대신 의사 요소를 범위 요소에 적용하는 것이라고 생각합니다.

다른 팁

당신이 사용하는 경우 display: inline-block 에 :after 의사, text-decoration 선언이 작동합니다.

Chrome 25, Firefox 19에서 테스트되었습니다.

나는 같은 문제가 있었고 내 해결책은 높이를 설정하고 오버플로:숨김

http://jsfiddle.net/r45L7/

a {
    text-decoration: underline;
}

a:after {
    content: "»";
    display: inline-block;
    text-decoration: none;
    height:16px;
    overflow: hidden;
    padding-left: 10px;
}

IE, FF, Chrome에서 작동합니다.

대안으로 텍스트 장식 대신 아래쪽 테두리를 사용할 수 있습니다.이것은 배경색을 알고 있다고 가정합니다.

a {
  text-decoration: none;
  border-bottom: 1px solid blue;
}
a:after {
  content: "foo";
  border-bottom: 1px solid white; /* same color as the background */
}

나에게 도움이 된 유일한 방법은 부모로부터 상속받은 것과 동일한 텍스트 장식 속성을 사용하여 별도의 반복 선택기를 선언한 다음 기본 선택기에서 텍스트 장식을 없음으로 설정하는 것이었습니다.

IE는 분명히 당신이 설정할 때 무엇을 해야할지 모릅니다 text-decoration: none 텍스트 장식 속성이 선언되지 않은 의사 요소(기본적으로 아무것도 선언되지 않음)이것은 명백히 부모로부터 상속되기 때문에 거의 의미가 없지만 아쉽게도 이제 우리는 최신 브라우저를 가지고 있습니다.

span.my-text {
  color: black;
  font-size: 12px;
  text-decoration: underline;
}

span.my-text:after {
  text-decoration: underline; // Have to set text-decoration here so IE knows it can be overwritten below
}

span.my-text:after {
  color: red;
  text-decoration: none; // In the same repeated selector, we can now overwrite text-decoration in our pseudo element.
}

내가 하는 일은 다음과 같이 a 요소 내부에 범위를 추가하는 것입니다.

<a href="http://foo.bar"><span>link text</span></a>

그런 다음 CSS 파일에서 :

a::after{
  content:" <" attr(href) "> ";
  color: #000000;
}

a {
  text-decoration:none;
}

a span {
  text-decoration: underline;
}

이것이 귀하가 요청한 질문에 대한 답변이 아니라는 것을 알고 있지만 다음을 사용할 수 없는 이유가 있습니까?background기반 접근 방식):

a.file_pdf {
background-image: url(images/pdf.png);
background-position: center right;
background-repeat: no-repeat;
padding-right: 15px; /* or whatever size your .png image is plus a small margin */
}

내가 아는 한, Firefox 구현은 :after 의사 클래스가 아닌 선택기 클래스의 속성을 관찰합니다.하지만 다양한 문서 유형을 실험해 볼 가치가 있을까요?엄격한 것이 아닌 과도기적 방식은 때때로 다른 결과를 허용합니다(항상 그런 것은 아니지만). 더 나은 결과...).

편집하다:

사용하는 것으로 나타납니다.

a:after {
    content: " <" attr(href) ">";
    text-decoration: none;
    color: #000000;
    background-color: #fff; /* or whatever colour you prefer */
}

재정의하거나 적어도 숨깁니다. text-decoration.이것은 실제로 어떤 종류의 대답도 제공하지 않지만 적어도 일종의 해결 방법을 제공합니다.

다음을 통해 PDF 파일에 대한 링크를 자동 선택할 수 있습니다.

a[href$=".pdf"]:after { content: ... }

html 파일의 헤드에 다음 링크를 구현하면 8 미만의 IE가 제대로 작동하도록 활성화할 수 있습니다.

<!--[if lt IE 8]><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script><![endif]-->

인용 부호를 표시하기 위해 내용 전 후를 사용할 때 모든 IE 버전에서도 매우 잘 작동합니다.

다음과 같이 콘텐츠를 절대적으로 배치합니다.

a {
    position: relative;
    margin: 0 .5em;
    font-weight: bold;
    color: #c00;
}
a:before,
a:after {
    position: absolute;
    color: #000;
}
a:before {
    content: '<';
    left: -.5em;
}
a:after {
    content: '>';
    right: -.5em;
}

이것은 Firefox 3.6에서 작동하지만 다른 브라우저에서는 테스트되지 않았습니다. 행운을 빕니다!

안녕하세요. 저도 이 문제로 어려움을 겪고 있었는데 우연히 해결 방법을 발견했습니다.

이 문제를 해결하기 위해 URL을 div로 감싸고 다음과 같은 것을 사용했습니다. 

.next_page:before {
    content: '(';
}

.next_page:after {
    content: ')';
}

1)

:after{
    position: absolute;
}

요소 콘텐츠가 래핑되지 않으므로 완벽하지 않습니다.

2)

:after{
    display: inline-block;
}

완벽하지는 않습니다. 왜냐하면 때로는 콘텐츠가 항상 요소 콘텐츠의 마지막 단어로 래핑되어야 하기 때문입니다.

현재로서는 세 가지 조건(1.콘텐츠가 너무 길면 자동으로 줄바꿈할 수 있습니다. 2. 이후 콘텐츠는 요소 콘텐츠로 래핑되어야 합니다. 즉, 이후 콘텐츠는 단독으로 차지해서는 안 됩니다.3. 텍스트-고화는 컨텐츠 후에 적용되지 않는 요소 조건에만 적용되어야한다.) 지금 생각하는 것은 텍스트 결정을 모방하기 위해 다른 방법을 사용하고있다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top