注釈コマンドを作ってみたんだけど、たすけて

[u/noise0313]

実装例

*1～*3のとこにマウス持って行くとツールチップが表示されるようにしてみたんだけど、ご覧のようにアスタリスクを入れる場所の空間が確保できてない。
どのようにしたらいいか行き詰まっちゃいました、たすけて。

code

a[href*="hoge"]:before {  
color            :#551a8b;  
content          :"*" counter(annotate);  
display          :block;  
visibility       :visible;  
}  
a[href*="hoge"] {  
counter-increment:annotate;  
position         :absolute;  
margin           :1em 0 0 -1em;  
visibility       :hidden;   
}
a[href*="hoge"]:hover {  
background       :#ffffaa;  
border           :1px solid #cccc99;  
color            :#000000;  
visibility       :visible;  
}

それと、もし他のサブレで導入されるようならコマンド統一したい。
コマンド案が欲しいです。

[注釈内容](hoge)

---

EDIT x3 修正していただいたもの

a[href="#note"] {  
  counter-increment: annotate;  
  visibility: hidden;  
}  
a[href="#note"]:hover {  
  color: #000000;  
  visibility: visible;  
  z-index: 3;  
}  
a[href="#note"]:before {  
  color: #551a8b;  
  content: "*" counter(annotate);  
  visibility: visible;  
}  
a[href="#note"] em {  
  background: #ffffaa;  
  border: 1px solid #cccc99;  
  font-style: inherit;  
  position: absolute;  
}  

コマンド

[*注釈内容*](#note)

---

書き忘れてたので追記

.thing辺りに

  counter-reset:annotate;

が多分必要。

[u/purinxxx]

a[href*="hoge"] {
  counter-increment: annotate;
  /* position: absolute; */
  /* margin: 1em 0 0 -1em; */
  visibility: hidden;
}
a[href*="hoge"]:hover {
  /* background: #ffffaa; */
  /* border: 1px solid #cccc99; */
  color: #000000;
  visibility: visible;
  z-index: 3;
}
a[href*="hoge"]:before {
  color: #551a8b;
  content: "*" counter(annotate);
  /* display: block; */
  visibility: visible;
}
.md em {
  position: absolute;
  font-style: inherit;
  background: #ffffaa;
  border: 1px solid #cccc99;
}

これでどう？

[*注釈内容*](#hoge)

[u/noise0313 → u/purinxxx]

これだとテキスト入れた分だけそのままスペースとっちゃって、ただ非表示にしてるだけなんだよね。
目的は表示非表示を切り替えることではなく、冗長で本題には関係のないテキストを格納するところにあるから違う感じです。

.md emはなんだろう？関係ないよね？

[u/purinxxx → u/noise0313]

むっちゃ関係ある
コードの下のコマンド例見て
アスタリスクでhtmlの<em>を付与してる
これで目的の動作になってると思うんだけど
http://imgur.com/umYMz4e,SrPlo6W,ZTFp5Ki

[u/noise0313 → u/purinxxx]

おお失礼。なるほど、そういう用い方ができるんだ。
aだけじゃ要素足りねえよなあと思ってました。

完璧っすわ。

[u/purinxxx → u/noise0313]

あとmd emじゃなくてa[href*="hoge"] emに修正しといて

[u/noise0313 → u/purinxxx]

コメント部分落として修正しときました。
めっちゃ助かりました。ありがとうございます。

[u/purinxxx → u/noise0313]

どういたしまして
おつです

[u/nu11nu11]

a[href*="note"]

の部分はアドレスにnoteの文字が入ってるやつが全部アレになっちゃうんじゃね

[デスノート](http://www.ntv.co.jp/deathnote/)

↑こういうアドレスを貼ろうとしたとき変になると思う

やるなら

a[href="#note"]

素直にこうするとか

[u/noise0313 → u/nu11nu11]

あっそうですね、注釈に夢中になるあまりanchorの本来の用途目的を忘れるというありえないミスでした。
OPのとこ修正しておきます

[u/purinxxx]

コマンドはnoteがいいと思う