小さなダッシュを単語の下に追加するにはどうすればよいですか？

-2

どのように単語の下に小さなダッシュを追加しますか？ボーダーボトムは機能しません。

2017-10-29 Ashutosh Shrestha

:after疑似要素を使用すると、カスタム幅の線を作成できます。

a { 
 
    text-decoration: none; 
 
    color: #335072; 
 
    position: relative; 
 
} 
 
a:after { 
 
    content: ''; 
 
    width: 40px; 
 
    height: 4px; 
 
    background: orange; 
 
    position: absolute; 
 
    left: 50%; 
 
    bottom: -10px; 
 
    transform: translateX(-50%); 
 
}

<a href="#">VIEW ALL DEALS</a>

出典

2017-10-29 12:15:04

ダッシュあなたが達成したいサイズを与えるために、アライメントや定期的なボックスモデルプロパティのためのポジショニングを使用し、その後、ここでCSSの擬似要素を利用することができます。

ここに私が思いついたのは、もう少しホバリングの強化です。それはあなたが質問に共有スクリーンショットとほぼ同じになります。

body { 
 
    font-family: Arial, sans-serif; 
 
} 
 

 
.dashed { 
 
    position: relative; 
 
    
 
    display: inline-block; 
 
    padding-bottom: .75em; 
 
    
 
    text-align: center; 
 
    text-decoration: none; 
 
    
 
    color: #333; 
 
} 
 

 
.dashed:after { 
 
    position: absolute; 
 
    left: 50%; 
 
    bottom: 0; 
 

 
    width: 25px; 
 
    height: 3px; 
 
    
 
    content: ""; 
 
    transform: translateX(-50%); 
 
    transition: width .1s ease-in-out; 
 
    
 
    background-color: orange; 
 
} 
 

 
.dashed:hover:after { 
 
    width: 40px; 
 
}

<a class="dashed" href="#">View All Deals</a>

乾杯を！

出典

2017-10-29 12:20:06

ありがとう、乾杯！ –

このお試しください：前回の回答にビルドするには

.text { 
 
    color: blue; 
 
    position: relative; 
 
    font-size: 50px; 
 
    text-decoration: none; 
 
} 
 

 
.dash { 
 
    color: orange; 
 
    border-bottom: 5px solid orange; 
 
    position: absolute; 
 
    border-radius: 2px; 
 
    width: 100px; 
 
    bottom: -10px; 
 
    left: 34%; 
 
}

<a class="text" href="#">VIEW ALL DEALS <span class="dash"></span></a>

出典

2017-10-29 12:26:10 Ehsan

を：私も後に擬似要素「を使用

.partial-underline { 
 
    text-transform: uppercase; 
 
    color: #00008b; 
 
    font: bold 20px sans-serif; 
 
    display: inline-block; 
 
} 
 

 
.partial-underline::after { 
 
    content: ''; 
 
    width: 20%; 
 
    background-color: #ff4500; 
 
    height: 4px; 
 
    margin: 8px auto auto; 
 
    display: block; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Title</title> 
 
    <link rel="stylesheet" href="stylesheet.css"/> 
 
</head> 
 
<body> 
 
    <span class="partial-underline">View all deals</span> 
 
</body> 
 
</html>

'私はマージンを使用しています：テキストの下に小さなダッシュを中央に置くためにauto。擬似要素を読み取るには、次のページに移動します。W3Schools - CSS Pseudo Elements

出典

2017-10-29 12:26:55

小さなダッシュを単語の下に追加するにはどうすればよいですか？

答えて

関連する問題