css 自定义下划线

Posted 2021-05-13

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}

// alert('Hello world!');

<p>“The only way to <a>get rid of a temp­ta­tion</a> is to <a>yield</a> to it.”</p>
<p>“The only way to <a>get rid of a temp­ta­tion</a> is to <a>yield</a> to it.”</p>

/**
 * Custom underlines
 */

body {
	font: 250%/1.6 Baskerville, Palatino, serif;
}

a {
	background: linear-gradient(gray, gray) no-repeat;
	background-size: 100% 1px;
	background-position: 0 1.02em;
	text-shadow: .05em 0 white, -.05em 0 white;
}

p:nth-child(2) a {
	background: linear-gradient(90deg, gray 66%, transparent 0) repeat-x;
	background-size: .2em 2px;
	background-position: 0 1em;
}