186(css)

2005-12-21

[] contentで生成された疑似要素とtext-decorationの関係.

なぜdel:afterで追加した文字列のline-throughを切れないのかについて考える.

  1. contentで生成される要素はどこに入るのか
  2. tetx-decorationはどこまで指定できるのか
  3. 組み合わせるとどういうことになるのか

の3部構成. 参考文献はW3CのCSS2.1勧告から. 12と16辺りだった筈.

contentで生成される要素

:beforeや:afterでcontentを使って色々表示する際に, 実際どうなっているかを考えてみる.

p {border: 1px solid black;}
p:before {content: "Note: " ;}
<p>quick brown fox...</p>

この場合,

<p><span class="generated_text">Note: </span>quick brown fox...</p>

という風に生成されている. (実際にspanが入る訳じゃないんだが)

生成された要素は子になる.

なので, first-letterとか指定している場合, "N"に利いてくる (そうだ).

text-decoration

親がinlineの場合, その子要素でtext-decorationを上書き出来ない.

p {text-decoration: underline;}
p span {text-decoration: none;}
<p><span>quick</span> brown fox...</p>

この場合, p要素全体に下線が引かれる. quickだけ下線が無いということはない.

この二つをあわせると?

ins要素やdel要素に対してcontentでdatetime属性の値を表示することがある. というかins要素の中で"追記"と毎回書くのも面倒だしcssでやろうよ. ついでに時間も表示しようとという話なんだが. それはさておき.

ins {text-decoration: underline;}
ins:after {content: "(追記:" attr(datetime) ")";}
<p>元のテキスト<ins>追加されたテキスト</ins></p>

この場合生成された後には,

<p>元のテキスト<ins>追加されたテキスト<span class="generated_text">(追記:2005-12-21T23:17:08+09:00)</span></ins></p>

となる.

pの中ではinsはデフォルトではinline要素扱いなので(確か), 生成された文字列の下線を消すことは出来ない.

test

pの中でdel

delの中でp

pの中でins

insの中でp


pの中でdel

delの中でp

pの中でins

insの中でp

トラックバック - http://css.g.hatena.ne.jp/smoking186/20051221

2005-12-17

CSS3 Advanced Layout Module

http://www.w3.org/TR/2005/WD-css3-layout-20051215/

<style type="text/css">
  dl { display: "ab"
                "cd" }
  #sym1 { position: a }
  #lab1 { position: b }
  #sym2 { position: c }
  #lab2 { position: d }
</style>
<dl>
  <dt id=sym1>A
  <dd id=lab1>A is een aapje
  <dt id=sym2>B
  <dd id=lab2>B is de bakker
</dl>

何この素敵仕様. これに準拠してくれるのならばfloatやpositionで悩むこともなくなる訳か.

トラックバック - http://css.g.hatena.ne.jp/smoking186/20051217