波浪下划线
本站对文字的重点标记,经过了几次改版。
一、着重号
最初使用着重号。它的问题是会造成段落间距变大,同时大圆点标记过于醒目,抢夺阅读视线。
text-emphasis: filled circle;
text-emphasis-position: under;
效果如:对照文字、着重号标记的文字
二、虚线下划线
着重号用了没多久,就改成虚线下划线了。
border-bottom: 2px dotted;
效果如:对照文字、虚线下划线标记的文字
三、波浪下划线
虚线下划线没什么问题,但是今天突然觉得平庸了,决定改成波浪线。
代码参考了 CSS实现文字下面波浪线动画效果。具体实现如下:
padding: 5px 0.2em;
background: radial-gradient(circle at 10px -7px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x, radial-gradient(circle at 10px 27px, transparent 8px, currentColor 8px, currentColor 9px, transparent 9px) repeat-x;
background-size: 20px 20px;
background-position: -10px calc(100% + 16px), 0 calc(100% - 4px);
效果如:对照文字、波浪下划线标记的文字