2018年07月24日(火)

グラデーションな下線

• 0
• 1
• 3
• 11

Result

See the Pen Underline gradient animation by kachibito (@kachibito) on CodePen.

下線がグラデーションになっているかのようにする
疑似要素をグラデーションにして1pxだけすき間を空け、下線がグラデーションになってるかのように見せます

css

a {/*はみ出した部分はoverflow: hidden;で非表示にする*/ color:#111; display: inline-block; overflow: hidden; position: relative; font-size:2rem; text-decoration: none; vertical-align: bottom; } a:after {/*すき間をあける*/ background: linear-gradient(to bottom, rgba(20, 20, 20, 0.8), rgba(20, 20, 20, 0.8)) center 1.08em/100% 1px no-repeat; content: ""; height: 100%; left: 0; ...