html - CSS :before element is not align with my text

Question

我正在使用 :before 元素在我的文本之前添加一个图像。但它没有对齐。

.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>

现状:

期望的结果:

Answer 1

您可以通过在 :before 上使用 position:absolute;height:100%; 来实现这一点。

.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>