css - 「text-decoration」と「：after」疑似要素、再考

Question

:after印刷メディアのスタイルシートでは、疑似クラスを使用してすべてのリンクの後にURLを追加したいと思います。

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

Firefox（およびおそらくChromeですがIE8ではありません）では、text-decoration: none無視され、下線はURLの下部に魅力的ではありません。ただし、colorURLは正しく黒に設定されています。作品を作る方法はありtext-decorationますか？

元の質問では、可変幅のテキストの代わりに固定サイズの画像が追加されました。その答えは、text-decorationプロパティを使用する必要をなくすために、パディングと背景画像を使用しています。コンテンツが可変幅のテキストである場合、私はまだ解決策を探しています。

score 121 · Accepted Answer

疑似で使用する場合、display: inline-block宣言は機能します。:aftertext-decoration

Chrome 25、Firefox19でテスト済み

score 22 · Accepted Answer

IE8の：beforeおよび：after疑似要素の実装は正しくありません。Firefox、Chrome、Safariはすべて、CSS2.1仕様に従って実装されています。

5.12.3：beforeおよび：after疑似要素

'：before'および'：after'疑似要素を使用して、要素のコンテンツの前または後に生成されたコンテンツを挿入できます。それらは、生成されたテキストのセクションで説明されています。

..。

カスケードスタイルシートレベル2リビジョン1（CSS 2.1）仕様

この仕様では、コンテンツは要素ではなく、要素のコンテンツの前または後に挿入する必要があることを示しています（つまり、 <element> content：before content content：after </ element>）。したがって、FirefoxとChromeでは、表示されるテキスト装飾は挿入されたコンテンツではなく、挿入されたコンテンツを含む親アンカー要素にあります。

オプションは、前の質問で提案した背景画像/パディング手法を使用するか、アンカー要素をスパン要素でラップして、代わりに疑似要素をスパン要素に適用することになると思います。

score 9 · Accepted Answer

私は同じ問題を抱えていました、そして私の解決策は高さとオーバーフローを設定することでした：隠された

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で動作します。

score 6 · Accepted Answer

別の方法として、テキスト装飾ではなく下枠を使用することもできます。これは、背景の色を知っていることを前提としています

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

score 4 · Accepted Answer

私がしていることは、次のように要素内にスパンを追加することです：

<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;
}

score 3 · Accepted Answer

私のために働いた唯一のことは、親から継承していたのと同じtext-decorationプロパティを持つ別の繰り返しセレクターを宣言し、次にメインセレクターでtext-decorationをnoneに設定することでした。

text-decoration: noneIEは、text-decorationプロパティが宣言されていない疑似要素を設定したときに何をすべきかを明らかに認識していません（デフォルトでは、デフォルトでは何も宣言されていません）。明らかに親から継承されているため、これはほとんど意味がありませんが、残念ながら、現在、最新のブラウザがあります。

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.
}

score 3 · Accepted Answer

1）

:after{
    position: absolute;
}

要素のコンテンツがラップされないため、完全ではありません

2）

:after{
    display: inline-block;
}

完全ではありません。コンテンツの後に、要素コンテンツの最後の単語で常にラップする必要がある場合があるためです。

今のところ、3つの条件すべてに適合する完璧なソリューションを見つけることができませんでした（1.コンテンツが長すぎると自動ラップされる可能性があります2.コンテンツが要素コンテンツでラップされる必要があるため、コンテンツがそれ自体で単一を占めるべきではないことを意味します）。 .text-decorationは、要素条件にのみ適用され、後のコンテンツには適用されません。）今のところ、text-decorationを模倣するために別の方法を使用していると思います。

score 1 · Accepted Answer

これはあなたが尋ねている質問に答えていないことを私は理解していますが、次の（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、疑似クラスではなく、セレクターのクラスのプロパティを監視します。ただし、さまざまなDoctypeを試してみる価値があるかもしれません。厳密ではなく過渡的な結果が得られる場合があります（常に良い結果とは限りませんが...）。

編集：

使用しているようです

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

をオーバーライドするか、少なくとも非表示にしtext-decorationます。これは実際にはいかなる種類の答えも提供しませんが、少なくともある種の回避策を提供します。

score 0 · Accepted Answer

次の方法でPDFファイルへのリンクを自動選択できます。

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

8未満のIEは、htmlファイルの先頭に次のリンクを実装することで正しく機能するように有効にできます。

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

引用符を表示するためにafter-before-content-thingを使用すると、すべてのIEバージョンでも非常にうまく機能します。

score 0 · Accepted Answer

コンテンツを次のように絶対に配置します。

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;
}

これはFirefox3.6で機能しますが、他のブラウザではテストされていません。幸運を祈ります。

score 0 · Accepted Answer

こんにちは私もこれに問題を抱えていて、たまたま回避策に出くわしました。

これを回避するために、URLをdivでラップし、次のようなものを使用しました。

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

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

css - 「text-decoration」と「：after」疑似要素、再考

11 に答える 11

Related

Reference