Редактирование темы подчеркивания подчеркивания CSS

Question

Я пытаюсь узнать, как добавить эффект подчеркивания на мою веб-страницу, но у меня небольшая проблема.

Вот код, который я использовал для подчеркивания эффекта:

.cmn-t-underline { 
position: relative; 
} 

.cmn-t-underline:after { 
display: block; 
position: absolute; 
left: 0; 
bottom: -10px; 
width: 0; 
height: 3px; 
background-color: dimgrey; 
content: ""; 
transition: width 0.3s; 

} 
.cmn-t-underline:hover { 
color: #333; 
} 

.cmn-t-underline:hover:after { 
width: 100%; 
} 

А вот код на моем CSS:

<div class="col-sm-6"> 
    <h1 class="text-center text-padding cmn-t-underline">Access Everywhere</h1> 
     <p class="text-center">Lorem ipsum dolor sit amet</p> 
    </div> 

И вот как это выходит раз анимация делается:

Мой вопрос: как я могу сделать так, чтобы u nderline остается прямо под заголовком H1? Я хочу, чтобы подчеркивание начиналось с «A» и заканчивалось на «e», но мне сложно определить, что вводить в код, чтобы исправить это. Я был бы очень признателен, если кто-то может помочь мне с этой небольшой проблемой.

Заранее спасибо

Answer 1

Вы можете использовать display-table на вашем h1 для имитации блок, как поведение без ширины 100%. ..

body { 
 
    text-align: center; 
 
} 
 

 
h1 { 
 
    display: table; 
 
    margin: 0 auto; 
 
} 
 

 
.cmn-t-underline { 
 
    position: relative; 
 
} 
 
.cmn-t-underline:after { 
 
    display: block; 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: -10px; 
 
    width: 0; 
 
    height: 3px; 
 
    background-color: dimgrey; 
 
    content:""; 
 
    transition: width 0.3s; 
 
} 
 
.cmn-t-underline:hover { 
 
    color: #333; 
 
} 
 
.cmn-t-underline:hover:after { 
 
    width: 100%; 
 
}

<div class="col-sm-6"> 
 
    <h1 class="text-center text-padding cmn-t-underline">Access Everywhere</h1> 
 
    <p class="text-center">Lorem ipsum dolor sit amet</p> 
 
</div>

Answer 2

Изменить отображение h1 на inline-block

.cmn-t-underline { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.cmn-t-underline:after { 
 
    display: block; 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: -10px; 
 
    width: 0; 
 
    height: 3px; 
 
    background-color: dimgrey; 
 
    content:""; 
 
    transition: width 0.3s; 
 
} 
 
.cmn-t-underline:hover { 
 
    color: #333; 
 
} 
 
.cmn-t-underline:hover:after { 
 
    width: 100%; 
 
}

<div class="col-sm-6"> 
 
    <h1 class="text-center text-padding cmn-t-underline">Access Everywhere</h1> 
 
    <p class="text-center">Lorem ipsum dolor sit amet</p> 
 
</div>