Css ile Hr Ortasına Yazı Eklemek

Değerli dostlarım, bu yazımızda Hr ayırıcı elementimizin ortasına Css ile nasıl yazı ekleyeceğimizi öğreneceğiz. Şimdi yapacağımız örneği anlamak için yukarıda yer alan resmi inceleyelim.

Html Kodlarımız

Html kodlarımız aşağıdaki şekilde,

<div class="container">
  <hr class="hr-text" data-content="Ve">
  <hr class="hr-text" data-content="Yada">
</div>

Css Kodlarımız

Css kodlarımız aşağıdaki şekildedir.

.hr-text {
  line-height: 1em;
  position: relative;
  outline: 0;
  border: 0;
  text-align: center;
  height: 1.5em;
  &:before {
    content: '';
    background: linear-gradient(to right, transparent, #818078, transparent);
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 1px;
  }
  &:after {
    content: attr(data-content);
    position: relative;
    display: inline-block;
    padding: 0 .5em;
    line-height: 1.5em;
    background-color: #fcfcfa;
  }
}

Diğer bir yazımızda görüşmek üzere. Sormak istediğiniz herhangi bir soru olursa aşağıda yer alan yorumlar kısmına yazmanız yeterli olacaktır. Diğer bir yazımızda görüşmek üzere.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Shares