web-dev-qa-db-ja.com

「text-decoration」と「：after」疑似要素の再検討

この質問 を再質問しています。私の場合、回答がうまくいかなかったためです。

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

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

Firefox（およびおそらくChromeだがIE8は不可）では、text-decoration: noneは無視され、下線がURLの下部に魅力的に引き伸ばされます。ただし、colorは正しく表示されますURLを黒に設定します。text-decorationを機能させる方法はありますか？

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

csscross-browserpseudo-element
48
palm3D

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

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

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

...

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

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

あなたのオプションは、前の質問で提案されたbackground-image/paddingテクニックを使用するか、おそらくアンカー要素をspan要素でラップし、代わりに擬似要素をspan要素に適用することになると思います。

22
MyItchyChin

display: inline-block疑似で:afterを使用すると、text-decoration宣言が機能します。

Chrome 25、Firefox 19でテスト済み

93
Elliott C

私は同じ問題を抱えていて、私の解決策は高さとoverflow：hiddenを設定することでした

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

9
julia

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

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

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

IEは、疑似要素にtext-decoration: noneを設定したときに、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.
}
3
Robert Henderson

次のように、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;
}
2
Célia

これはあなたが尋ねている質問に答えていませんが、以下を使用できない理由があります（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を試してみる価値はありますか？厳密なものではなく、一時的なものは、異なる結果を許容することがあります（ただし、常にbetterの結果とは限りません...）。

編集：

使用しているようです

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

text-decorationを上書きするか、少なくとも非表示にします。これは実際にはどんな種類の答えも提供しませんが、少なくとも一種の回避策を提供します。

1
David Thomas

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]-->

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

0
Helen

こんにちは私もこれにも問題があり、たまたま回避策を見つけました。

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

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

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

1）

:after{
    position: absolute;
}

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

2）

:after{
    display: inline-block;
}

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

今のところ、3つの条件すべてに適合する完全なソリューションを見つけることができませんでした（1.コンテンツが長すぎる場合、コンテンツは自動的に折り返される可能性があります。 .text-decorationは要素の条件にのみ適用され、後のコンテンツには適用されません。）今のところ、text-decorationを模倣する別の方法を使用していると思います。

0
Ao Li

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

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では機能しますが、他のブラウザーではテストされていませんが、幸運を祈ります！

0
Daniel