Удалить подчеркивание оформления текста для a: after в css

Возможный дубликат:
"text-decoration" и псевдоэлемент «:after»
"text-decoration" и псевдоэлемент ":after", пересмотренный

Я делаю навигационные ссылки, используя теги <a> Ниже приведен html

<div class="nav_container">
    <a class="panel" href="demolink">menu1</a>
    <a class="panel" href="demolink">menu2</a>
    <a class="panel" href="demolink">menu3</a>
</div>

И применить свойство :after css, чтобы поставить конвейер для разделителя

.panel:after{
    content:"|";
    margin-left: 4px;
    margin-right: 4px;
}
.panel:last-child:after{
    content:"";
}

Я хочу подчеркнуть, когда выбрано меню, для которого я применяю класс с именем selected

.panel.selected {
    text-decoratoion:underline;
}

Но проблема в том, что трубопровод после меню "|" также имеет подчеркивание, и я хочу удалить его. Я даже пытался изменить css для .panle:after следующим образом,

.panel:after{
    content:"|";
    margin-left: 4px;
    margin-right: 4px;
    text-decoration:none;
}

Но все же подчеркивание есть.

Любое предложение, спасибо.


navigation html css text-decorations
person Prathamesh mhatre    schedule 01.11.2012    source источник
comment
См. stackoverflow.com /вопросы/1238881/   -  person Asad Saeeduddin    schedule 01.11.2012
comment
Это невозможно сделать, и это тоже дубликат.   -  person David says reinstate Monica    schedule 01.11.2012
comment
Другой способ, которым вы можете это сделать, — заменить text-decoration на none и применить подчеркивание к тексту с помощью border-bottom: 1px сплошной #ccc, а для :after используйте border-bottom: 1px сплошной белый; таким образом, к элементу :after не будет применяться подчеркивание, но подчеркивание будет в тексте. просто и должно работать нормально. Используйте заполнение для :after, если вы хотите, чтобы между элементами :after был пустой промежуток.   -  person John Griffiths    schedule 18.11.2014

Ответы (4)


arrow_upward
5
arrow_downward

вы также можете использовать другой метод для своего вопроса: - демонстрация

Я пробовал с минимизированным кодом: -

HTML

<div class="nav_container">
    <a href="demolink">menu1</a>
    <a href="demolink">menu2</a>
    <a href="demolink">menu3</a>
</div>

CSS

.nav_container a {
color:red;
display:inline-block;
}
.nav_container a + a{
color:red;
border-left:1px solid red;
padding-left:7px;
line-height:12px;
}
person Shailender Arora    schedule 01.11.2012

arrow_upward
23
arrow_downward

Попробуйте это:

.panel:after {
    display:inline-block;
}

Или используйте следующее:

.panel {
  display: inline-block;
  vertical-align: top;
  position: relative;
  color: black;
  font-size: 14px;
  font-weight: bold;
  margin: 0 5px;
}

.panel:after {
  content: '';
  border-left: solid 2px red;
  left: -10px;
  top: 2px;
  height: 10px;
  position: absolute;
}

.panel:first-child:after {
  display: none;
}

.panel:hover {
  text-decoration: none;
}
<div class="nav_container">
  <a class="panel" href="demolink">menu1</a>
  <a class="panel" href="demolink">menu2</a>
  <a class="panel" href="demolink">menu3</a>
</div>

person Rohit Azad Malik    schedule 01.11.2012
comment
ты хоть вопрос сначала прочитай - person Mr. Alien; 01.11.2012

arrow_upward
1
arrow_downward

Я точно не знаю, что делает ваша часть .panel.selected {}. Однако вы можете сделать ссылку подчеркнутой, когда она выделена, используя это.

.panel:focus {text-decoration:underline;}

И вы можете удалить подчеркивание из ссылок и труб (|) следующим образом.

.panel:link {text-decoration:none;}

Добавьте выше два на свою страницу и проверьте.

person prageeth    schedule 01.11.2012

arrow_upward
-1
arrow_downward

Простое меню для вашего требования.

HTML:

<div class="menu">
<ul>
<li class="last-menu"><a href="#">menu1</a></li>
<li class="last-menu"><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
</ul>
</div>

CSS:

.menu{
    width:100%;
}

.menu ul{
    list-style:none;
}

.menu li{
    float:left;

}

.last-menu{
    border-right:1px solid #000;
}
person Sandeep Pattanaik    schedule 02.11.2012