CODEWITHSUNDEEP
htmlcss
mistycloud
mistycloud

Reputation: 19

CSS :before element is not align with my text

I'm using :before element to add an image before my text. But it's not aligned.

.page-header:before {
  content: url('../img/page-header.png');
  display: inline-block;
}

.page-header .page-title {
  padding: 0 10px;
  color: #ff4500;
  font-size: 32px;
  padding-bottom: 0px;
  padding-left: 0px;
}

.page-header .page-sub-title {
  font-size: 18px;
}
<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="page-header">
        <span class="page-title">Title</span>
        <br/>
        <span class="page-sub-title">
                        <span>Subtitle</span><br/>
        <span>Introduction Paragraph</span>
        </span>
      </div>
    </div>
  </div>
</div>

Current situation:

enter image description here

Desired outcome:

enter image description here

Upvotes: 0

Views: 86

Answers (4)

arvinda kumar
arvinda kumar

Reputation: 709

You can try this one working fine :) 

.page-header{
  position: relative;
  padding-left: 15px;
}
.page-header::before{
  content: '';
  width: 5px;
  height: 100%;
  border-left: 1px solid #ff4500; 
  border-right: 1px solid #ff4500; 
  position: absolute;
  left: 0;
  top: 5px;
}
.page-header span.page-title {
  padding: 0 10px;
    color: #ff4500;
    font-size: 32px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-bottom: 5px;
    display: block;
    font-family: arial;
}
.page-header .page-sub-title span {
  display: block;
  color: #333;
  font-size: 18px;
  font-family: arial;
}
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="page-header">
                <span class="page-title">Title</span>
                <br/>
                <span class="page-sub-title">
                    <span>Subtitle</span><br/>
                    <span>Introduction Paragraph</span>
                </span>
            </div>
        </div>
    </div>
</div>

Upvotes: 0

Sumit Patel
Sumit Patel

Reputation: 4638

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="page-header">
                <span class="page-title">Title</span>
                <br/>
                <span class="page-sub-title">
                    <span>Subtitle</span><br/>
                    <span>Introduction Paragraph</span>
                </span>
            </div>
        </div>
    </div>
</div>

<style>
    .page-header {
    border-left: double 4px #000;
    padding-left: 10px;

}

.page-header .page-title {
    padding: 0 10px;
    color: #ff4500;
    font-size: 32px;
    padding-bottom: 0px;
    padding-left: 0px;
}

.page-header .page-sub-title {
    font-size: 18px;
}
<style>

Insted of using image you can achieve this using "border-left: 4px #000 double;" You don't need any before.

Upvotes: 0

Hamza Arab
Hamza Arab

Reputation: 152

You can achieve this by using position:absolute;height:100%; on your :before.

.page-header {
  padding-left: 15px;
  position: relative;
}

.page-header:before {
    content: '';
    display: inline-block;
    border: 1px solid #000;
    border-top: 0;
    border-bottom: 0;
    height: 100%;
    width: 3px;
    
    position: absolute;
    left: 0;
    top: 0;

}

.page-header .page-title {
    color: #ff4500;
    font-size: 32px;
}

.page-header .page-sub-title {
    font-size: 18px;
}
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="page-header">
                <span class="page-title">Title</span>
                <br/>
                <span class="page-sub-title">
                    <span>Subtitle</span><br/>
                    <span>Introduction Paragraph</span>
                </span>
            </div>
        </div>
    </div>
</div>

Upvotes: 1

adel
adel

Reputation: 3507

  .page-header:before {
    content: "";
    background-color:red;
    position:absolute;
    height:100%;
    top:0;
    left:0;
    width: 4px;

}
.page-header{
  position:relative;
  padding-left:10px;
}

.page-header .page-title {
    padding: 0 10px;
    color: #ff4500;
    font-size: 32px;
    padding-bottom: 0px;
    padding-left: 0px;
}

.page-header .page-sub-title {
    font-size: 18px;
}
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="page-header">
                <span class="page-title">Title</span>
                <br/>
                <span class="page-sub-title">
                    <span>Subtitle</span><br/>
                    <span>Introduction Paragraph</span>
                </span>
            </div>
        </div>
    </div>
</div>

i didn't understand well what you trying to achieve but i managed to get this result! hope this help!

Upvotes: 0

Related Questions