web-dev-qa-db-ja.com

CSSの丸いキャップの下線

enter image description here

CSSを使用して（上の画像のように）丸いキャップの下線を付けることはできますか？どうやって？

border-bottomでこれを行う方法はありますか？ border-radiusは、代わりにこのスタイリッシュな効果を生み出します。

enter image description here

bordercssunderline
13
hpique

編集：私はhpiqueが何をしたのか誤解しましたが、これはうまくいくはずです：

#test {
  font-size: 50px;
  background: transparent;
  border-radius: 10px;
  height: 10px;
  width: 255px;
  box-shadow: 0 55px 0 0 #000;
  font-family: sans-serif;
}
<div id="test">Hello world</div>

基本的に私はテキストをdivに配置し、ボックスの影はそのdivのセットheightおよびwidthと同じサイズになります。height/widthで遊ぶだけで、必要なものが得られます...

JSBinデモ

デモのスクリーンショット：

This should be what was expected...

12
DarkAjax

はい、可能です。 :afterを使用してコンテンツなしでブロック要素を追加し、次のように希望の幅/高さを指定します。

h1:after { 
  content:""; 
  float:left; 
  background:green; 
  width:100%; 
  height:6px; 
  border-radius: 3px;
}

ここでフィドル： https://jsfiddle.net/toqL0agq/1/

2
youtag

いいえ。これを純粋にHTML + CSSで実行する場合は、テキストの下に配置する2番目の要素が必要になり、それに曲率と背景色を適用します。あるいは、クリンジに値する、私の意見では、あなたはできた画像を使用します。

1
Grant Thomas

受け入れられた答えでこれと同じことを試みましたが、それでも質問に示されている望ましくない結果が得られていることがわかりました。これは、疑似クラスで実現できます。

HTML：

<span class="kicker">Hello World</span>

CSS：

.blog__kicker {
font-size: 1rem;
position: relative;

&:after {
    content: '';
    display: block;
    width: 100%;
    height: 6px;
    border-radius: 6px;
    background: #000;
    position: absolute;
    bottom: 0;
    left: 0;
}

}

1
jennsuzhoy

これを行うには、テキストの下にdivを使用し、その境界半径を2000pxに設定します。簡単になると思います

HTML：

<div class="wrapper">
    <span>Hell World</span>
    <div class="underline"></div>
</div>

CSS：

.underline{
    height:0px;border: 3px solid black;
    border-radius: 2000px;
}
.wrapper{
    display:inline-block;
}

JQUERY SNIPPET：

var arbitrarynumber = 5
$('.underline').width($('.underline').parent().width()-arbitrarynumber)
0
Arpit Patel

Youtagの回答と同様に、私のソリューションでは疑似要素を使用していますが、アンダーラインはテキストの長さのみを実行し、複数行に折り返すことができます（テキストの各行の下にアンダースコアを実行します）。

基本的に、要素の前後の疑似要素の円で要素の境界の端を手動でキャップします。

h1 a {
  text-decoration: none;
  position: relative;
  border-bottom: 15px solid;
  padding-bottom:3px;
}

  h1 a:hover, h1 a:focus {
  border-bottom: 15px solid #eb6d32;
}

h1 a:before, h1 a:after {
  content: '';
  height: 15px;
  width: 15px;
  background-color: currentColor;
  border-radius: 15px;
  position: relative;
  display: inline-block;
  vertical-align: text-bottom;
  margin-bottom: -18px;
}

h1 a:before {
  left: .2ex;
  margin-left: -.4ex;
}

h1 a:after {
  margin-right: -.4ex;
  right: .2ex;
}

疑似要素にleftとrightを使用して、テキストの端が突き出すぎないようにします。

私の codepen を参照してください。

0
notGettingStabbed