Как использовать пользовательское подчеркивание с помощью breakline в CSS?

#html #css #line-breaks #dotted-line

#HTML #css #разрывы строк #пунктирная линия

Вопрос:

Я хотел бы стилизовать свою ссылку с помощью фона.

Когда ссылка короткая, у меня нет проблем с моим фоном, но моя ссылка слишком длинная, у меня есть линия разрыва, и мой фон больше не работает. Я не хочу использовать text-decoration: underline , потому что это не тот дизайн (пользовательский, с пробелами между ними)

HTML :

 <a href="#">Ceci est un menu très long</a>
<a href="#">Blabl</a>

CSS :

 a {  
   background: url(dotted.jpg) repeat-x;
}

Вот моя проблема :

введите описание изображения здесь

Возможно ли это, как показано ниже?

введите описание изображения здесь

и :

введите описание изображения здесь

1. Можете ли вы показать используемый вами CSS, чтобы мы могли помочь внести изменения для вас?

2. Установите для вашего элемента значение display: встроенный. чтобы разделить строку между ними, вам понадобится <br /> или любой другой тег, отображаемый как элемент уровня блока

Ответ №1:

Вы могли бы попробовать это:

 a {
  display: inline-block;
  max-width: 100px;
  text-decoration: none;
}

span {
  border-bottom: 1px dotted;
}

 <a href='#'><span>click here to do something</span></a>

Ответ №2:

Вы можете попробовать сделать отступ справа, даже если это звучит странно 🙂 : DEMO

 a {
    border-bottom:1px dotted;
    text-decoration:none;
    margin-right:100%;
}

встроенный, но прерывающий строку

1. Я подозреваю, что это будет иметь негативные последствия

2. @AlexW какого рода? , это может просто вообще ничего не делать

3. @AlexW пара тестов: jsfiddle.net/z545p/2 у вас есть какие-либо другие идеи?

Ответ №3:

Вы могли бы попробовать это:

HTML :

 <a href='#'><span>click here to do something</span></a>

CSS :

 a{
 display:inline-block;
 max-width:100px;
 text-decoration:none;
}
span{
 border-bottom: 1px dashed;
}

ДЕМОНСТРАЦИЯ

Ответ №4:

Если вам нужен персонализированный дизайн, у вас также есть border-image, но Ie11…

Ответ №5:

Нет необходимости добавлять изображения для точечного подчеркивания. Вы можете просто использовать свойство border-bottom css для того же самого.

 <a href="#">Ceci est un menu très bla bla bla bla nla bla bla bla nla</a> 

a{
  border-bottom : 2px dotted #CCC;
  text-decoration : none;  
 }

Посетите http://jsfiddle.net/mijoemathew/zhp6D для тестирования кода.

Ответ №6:

Вы можете сделать это в современных браузерах с border-image свойством: http://codepen.io/pageaffairs/pen/Gdxpg

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

div {
    width: 120px;
}

a {
    text-decoration: none;  
    line-height: 1.6em; 
    text-transform: uppercase;
    border-width: 0 0 9px 0;
    -webkit-border-image: url(http://pageaffairs.com/sp/so-24554400/border.png) 9 repeat; /* Safari */
    -o-border-image: url(http://pageaffairs.com/sp/so-24554400/border.png) 9 repeat;; /* Opera */
    border-image: url(http://pageaffairs.com/sp/so-24554400/border.png) 9 repeat;;
}

</style>
</head>
<body>

<div><a href="">Some text with an underline and background</a></div>

</body>
</html>

Ответ №7:

Просто оставьте интервал и сделайте a{display:inline}.

 <a href='#'>click here to do something</a>

a {
 display:inline;
 text-decoration:none;
 border-bottom: 1px dotted;
}

Скрипка

Очиститель и работает как шарм.