Подскажите пожалуйста как можно переопределить правило в css? Я задал стиль всем псевдоэлементам заголоаков, top: 50%, для боковой линии, чтоб она стояла сбоку по центру заголовка, теперь в одной секции мне нужно было переопределить такой же заголовок, сделать его bottom: 0; но стили не переопределяются, !important не помогает.
Вот код:
<section id="template" class="template">
<div class="container">
<h2>Fully Supported template</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada sodales risus, a adipiscing lorem commodo vitae. Ut semper semper lacus. Suspendisse convallis vel tellus at consectetur. Aenean risus arcu</p>
<a href="#" class="btn">Read more</a>
</div>
</section>
h2::before {
content: "";
background: #222;
height: 2px;
width: 120px;
position: absolute;
top: 50%;
margin-left: -150px;
}
h2::after {
content: "";
background: #222;
height: 2px;
width: 120px;
position: absolute;
top: 50%;
margin-left: 30px;
}
Заголовок, который нужно переопределить
.template h2::after {
content: "";
width: 350px;
height: 2px;
background: red;
position: absolute;
bottom: 0;
left: 0;
display: block;
}