Как уменьшить нижний border?

Question

Как сделать что-бы под точкой не было бордера, а был только под словом. Не нужно помещать точку в отдельный тег или убирать из тега.

.description_blue {
    font-weight: bold;
    border-bottom: 1px dashed #1698d9;  
    color: green;
    font-size: 34px;
}

<span class="description_blue">купи.</span>

Answer 1

а вы извращенец :)

напрямую никак, надо делать разные ухищрения:

способ 1: вынести границу в другой тег или псевдотег, такой как before или after:

.description_blue {
    position:     relative;
    font-weight:  bold;
    color:        green;
    font-size:    34px;
}

.description_blue:after {
  content:        '';

  position:       absolute;
  bottom:         0px;
  left:           0px;
  
  width:          calc(100% - 10px);
  height:         5px;
  
  border-bottom:  1px dashed #1698d9;
}

<span class="description_blue">купи.</span>

способ 2: если текст обязан заканчиваться на точку - вынести точку в псевдотег:

.description_blue, .description_blue:after {
    position:       relative;
    font-weight:    bold;
    color:          green;
    font-size:      34px;
}

.description_blue {
    border-bottom:  1px dashed #1698d9;  
}

.description_blue:after {
  position:         absolute;
  content:          '.';
}

<span class="description_blue">купи</span>

Answer 2

А я думаю, что совсем не извращенец :)

напрямую можно, и никаких ухищрений делать не надо:

способ простой: linear-gradient

.description_blue {
  font-weight: bold;
  /*border-bottom: 1px dashed #1698d9;*/
  color: green;
  font-size: 34px;
  background-position: 0 100%, 100% 0;
  background-repeat: no-repeat;
  background-size: calc(100% - 8px) 1px;
  background-image: repeating-linear-gradient(to right, #1698d9, #1698d9 3px, transparent 3px, transparent 6px);
}

<span class="description_blue">купи.</span>

БЛОГ НА HUSL

Как уменьшить нижний border?

Ответы (2 шт):