Как стилизовать псевдоэлемент CSS без подчеркивания внутри ссылки?

Можно ли добавить: перед псевдоэлементом CSS в тег A html без отображения подчеркивания текста для псевдоэлемента?

В следующей разметке слева от ссылки добавляется символ "+", который он правильно подчеркивает на мыши, однако также подчеркивается псевдосимвол "+", даже если для правила css установлено значение "h3 a: before: hover {text-decoration: none;}"

<style>
h3 {
    display:block;
    margin:20px auto;
    padding:6px;
    width:85%;
    text-align:left;
    font: 21px 'lucida sans'; color:#444; 
    border-bottom:#ccc 1px solid;
}
h3 a{
    margin:0; padding:8px 4px 0 0;
    display:inline;
    float:right;
    width:auto;
    text-decoration:none;
    font: 14px 'lucida sans';   
}
h3 a:hover{ text-decoration:underline; }
h3 a:before{ content: '+'; margin:0; padding: 4px; }
h3 a:hover:before{ text-decoration:none; }
</style>

<h3>My Title <a href="#">link</a></h3>

Ответ 1

Настройка: до элемента отображения: встроенный блок приведет к стилю text-decoration: none;.

http://jsfiddle.net/KpRg7/3

  h3 a:before{
      display:inline-block;
      content: '+';
      margin:0;
      padding: 4px;
      text-decoration:none;
  }

Ответ 2

Ну, я могу внести свой вклад в ответ, но не имею решения. Вместо h3 a: before: hover, отмените псевдоклассы, т.е. H3 a: hover: before. Это, по крайней мере, предназначено для: до части правильно.

Ответ 3

Мое единственное решение этой проблемы, которая работает против IE, - это добавить контент в качестве фона. В css content:''; вместо + и добавьте то, что необходимо для спрайта фонового изображения. Таким образом, IE не будет показывать подчеркивание.

Ответ 4

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

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

http://jsfiddle.net/KmWL2/

h3 {
    display:block;
    margin:20px auto;
    padding:6px;
    width:85%;
    text-align:left;
    font: 21px 'lucida sans'; color:#444; 
    border-bottom:#ccc 1px solid;
}
h3 a{
    margin:0; padding:8px 4px 0 0;
    display:block;
    float:right;
    width:auto;
    text-decoration:none;
    font: 14px 'lucida sans';
    position: relative;
}
h3 a:hover{ text-decoration:underline; }
h3 a:before{ 
    content: '+'; 
    margin:0; 
    padding: 4px;
    position: absolute;
    left: -15px;
    top: 3px;
}
h3 a:hover:before{ text-decoration:none; }

Ответ 5

Вы можете проверить мое решение здесь: http://codepen.io/gml/pen/CEstr Трюк для IE заключается в том, что вам нужно установить высоту и переполнение, скрытые на псевдоэлементе. Таким образом подчеркивание получает отсечку.

Ответ 6

Нет другого решения, кроме эмулирования эффекта подчеркивания с другим псевдоэлементом...

@see http://jsfiddle.net/KpRg7/9/

h3 {
    display:block;
    margin:20px auto;
    padding:6px;
    width:85%;
    text-align:left;
    font: 21px 'lucida sans'; color:#444; 
    border-bottom:#ccc 1px solid;
}

h3 a{
    margin:0; padding:8px 4px 0 0;
    display:inline;
    float:right;
    width:auto;
    text-decoration:none;
    font: 14px 'lucida sans';   
}

h3 a:before{ 
    content: '+'; 
    margin:0; 
    padding: 4px;
    position: absolute;
    left: -15px;
    top: 3px;
}

h3 a:hover { position: relative; }

h3 a:hover:after{ content:""; position: absolute; height: 1px;  
    right: 4px; /* depends of the right padding */
    left: 0; /* depends of the left padding */
    background-color: blue; /* depends of the link color */
    top: 22px; /* depends of the overall line-height */ }