"text-decoration"の"後"の疑似要素の再訪

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

質問

私は再い この質問 その答えが思った。

私のスタイルシートのための印刷メディアたい追加のurlの後にリンク毎の :after 疑似クラスです。

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

Firefoxで（おそらくクロームなIE8), text-decoration: none は無視され、下線が伸びunattractively下のurl。の color しかし正しくセットブラックのurl。はしてもらえると助かりますの text-decoration す。

の その 追加の固定サイズの画像の代わりに可変幅します。その答え用のパディング、背景画像を回避するのに使用し文字-装飾物件です。まだ見解の場合のコンテンツは可変幅します。

役に立ちましたか？

解決

IE8の実施の前と後の疑似要素が間違っています。Firefox、Chrome、Safariすべてを実施するに従ってCSS2.1仕様となります。

5.12.3の前と後の疑似要素

の"前"と"その後 疑似要素に使用できる 挿入 生成されるコンテンツ前後に 要素のコンテンツ.彼の説明 セクションを生成します。

...

Cascadingスタイルシートをレベル2の改訂1(CSS2.1）仕様

仕様のコンテンツを挿入する前後 要素のコンテンツ, な要素の （<element>内容：前 コンテンツ コンテンツ：</element>).このようにFirefoxやChromeのテキストの装飾だけ出会いは、挿入されたコンテンツではなく、親会社のアンカー要素が含まれる挿入されます。

行きたいというオプションを利用の背景画像/パディング手法を提案する前の問題はあるものを包んだアンカー要素span要素の疑似要素のspan要素です。

他のヒント

あなたはdisplay: inline-block擬似上:afterを使用する場合は、text-decoration宣言は動作します。

クローム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 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 */
}

私の知る限りでは、:afterのFirefoxの実装では、セレクタのクラスではなく、擬似クラスのプロパティを観察します。これは、しかし、別の文書型を試して価値があるかもしれませんか？ 、過渡的ではなく、厳密には、時々、（の結果...よりよい常に<全角>ではないが）異なる結果を可能にします。

編集ます：

これは、使用していることを表示されます。

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

IE 8未満では、HTMLファイルの頭の中でこのリンクを実装することで正常に動作するために有効にすることができます：

<!--[if lt IE 8]><script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script><![endif]-->
あなたが引用符をdosplayingため後ビフォア内容のものを使用する場合、

これは、アル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に私の作品は、しかし、他のブラウザでテストされていない、最高の幸運！

こんにちは、私も同様にこれで問題が発生したと回避策を偶然に起こった。

それを回避するために、私はdivの中にURLを包み、このようなものを使用しました。 

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

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

1）

:after{
    position: absolute;
}

要素の内容は折り返されませんので、

、完璧ではありません

2）

:after{
    display: inline-block;
}
時々、私たちは常に要素コンテンツの最後の言葉でラップする必要があり、コンテンツの後に希望しているため、

、完璧ではありません。

今、私は完璧なソリューションは、すべての3つの条件（1収まる見つける見つけることができませんでした。内容でし自動ラップをそれが長すぎる2.after内容だ場合については、それによって、単一の占めるべきでないコンテンツの後を意味し、要素コンテンツをラップする必要があります自己。3.textの装飾だけでコンテンツの後には適用されない要素を条件に適用する必要があります。） 今の私の考えは、テキスト装飾を模倣する他の方法を使用しています。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top