このような優れたコレクションが、疑似クラスの後を使用する単純なメソッドを示していないことは奇妙です。
この方法の利点：
+使いやすさ;
+豊富な設定機会（ポジショニング、スタイル、太さ、線の色）;
+任意の背景で動作します。
+ズームに依存しません（テキストが1行のままの場合）
短所：
-複数行のテキストに下線を引くのには適していません。
おそらく他にもいくつかの欠点があります。 ヒントに感謝します。
<span class='inline-block decorated-link'> {display: inline-block;} </span> <br> <br> <a href='#' class='decorated-link'> </a>
.decorated-link { color: #337ab7; position: relative; text-decoration: none; cursor: pointer; } .decorated-link:hover { text-decoration: none; color: red; } .decorated-link:after { content: ''; position: absolute; right: 0; left: 0; bottom: 1px; width: 100%; border-bottom: thin dashed rgba(51, 122, 181, 0.4); } .decorated-link:hover:after { border-color: rgba(255, 0, 0, 0.3);; } a.decorated-link:after { bottom: 0; } .inline-block { display: inline-block; }