Круглая крышка подчеркивается в CSS

Ответ 1

РЕДАКТИРОВАТЬ: Я неправильно понял, что hpique wated, но это должно работать:

#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>

Ответ 2

Нет. Если вы хотите сделать это исключительно с помощью HTML + CSS, вам понадобится дополнительный элемент для сидения под текстом, а затем применить к нему кривизну и цвет фона. В качестве альтернативы, и, как мне кажется, вы можете использовать изображение.

Ответ 3

Да, возможно. Добавьте элемент блока с помощью :after без содержимого и укажите желаемую ширину/высоту:

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

Заклинание здесь: https://jsfiddle.net/toqL0agq/1/

Ответ 4

Как и ответ 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.

Ответ 5

вы можете сделать это, используя div под текстом и установив свой радиус границы до 2000 пикселей. я думаю, что будет проще

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)

Ответ 6

Я попытался сделать то же самое с принятым ответом, но обнаружил, что все еще получаю нежелательный результат, показанный в вопросе. Вы можете достичь этого с помощью класса псевдо:

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;
}

}