テキストの周囲にコンテンツを挿入するための CSS ソリューション

この記事では、テキストの周囲にアイコンを挿入する方法、アイコン間の位置関係を制御する方法、および HTML 構造の合理性と CSS 属性の使用を通じてさまざまなソリューションの実装を比較する方法について説明します。効果のメリットとデメリット。

共通のデザインドラフト要件

• テキストの前後、上、下にアイコン、線、三角形、円を挿入します

• 挿入された要素はテキストと間隔をあけて配置する必要があります（中央、上、ベースライン）などの位置関係。

• 表示や背景などの属性を柔軟に使用

• コンテンツを挿入するには、content 属性で :before と :after を使用します。

  :before和:after配合content属性来实现插入内容。

• 通过absolute、vertical、margin、line-height等属性实现文本与符号位置关系。

• 能够使用CSS属性画出的图形则用CSS属性，否则用background属性显示背景图片

实践操作

• 解法一：改变HTML结构，通过在文本元素前或后增加标签如<span></span>和<i></i>

• 解法二：直接使用伪元素:before和:after（Ie7以下不支持）

• 必须有content属性

• 插入的元素的是内联元素，需要显示地定义为块级元素，才能设置高度，填充，边距等

线条

html

<div class="article-block-title">
    <h2 class="title">
        <span>前端技术</span><i>前端技术前端技术</i>
    </h2>
</div>

css

.article-block-title {
    height: 44px;
    /*实现文本与竖线对齐*/
    line-height: 44px;
    border-left: 3px solid #72b16a;
    padding-left: 20px;
}

分析

• 直接利用该文本的容器使用border-left、border-right、border-top、border-bottom可以分别实现只显示文本上、下、左、右的线条。

• 对于inline,inline-block等，可使用line-height实现文本与竖线的居中。

html

<p class="text-info">
    <i class="line line-left"></i>resto restaurant home page website template<i class="line line-right"></i>
</p>

css

.text-info .line {
    display: inline-block;
    width: 40px;
    border-top: 1px solid #fff;
    /*使横线居中*/
    vertical-align: middle;
    /*for IE7*/
    *margin-top: 22px;
}

分析

• 在文本前后添加i、span

絶対、垂直、マージン、行の高さなどの属性を通じて、テキストとシンボルの位置関係を実現します。
CSS属性を使用して描画できるグラフィックはCSS属性を使用し、そうでない場合はbackground属性を使用して背景画像を表示します

• 実際の操作

• 解決策1: テキストの前後にタグを追加してHTML構造を変更します<span></span> や <i></i> などの要素

解決策 2: 疑似要素を直接使用します。および: 後 (Ie7 以降ではサポートされません)

content 属性が必要です

挿入された要素は
• インライン要素

  であり、これを行うには、

  ブロックレベル要素
として明示的に定義する必要があります高さ、パディング、マージンなどを設定します。

<div class="menu-tips">The menu</div>

ログイン後にコピー

.menu-tips:after {
    position: absolute;
    left: 0;
    bottom: 0;
    content: "";
    width: 0;
    height: 0;
    /*menu是156px宽，所以这里设置78px*/
    border-left: 78px solid transparent;
    border-right: 78px solid transparent;
    border-bottom: 10px solid #fff;
}

ログイン後にコピー

• テキストを使用してコンテナを直接使用する border-left 、 border-right 、 border-top 、および border-bottom は、それぞれテキストの上、下、左、右の行のみを表示できます。

• インライン、インラインブロックなどの場合、行の高さを使用してテキストと垂直線を中央揃えにすることができます。



• html

  <div class="btn-group">
      <a href="" class="btn"></a>
      <a href="" class="btn active"></a>
      <a href="" class="btn"></a>
      <a href="" class="btn"></a>
  </div>

  ログイン後にコピー
css

• .index-panel-header .btn-group {
      float: right;
      /*清除行内元素的4px空白间距*/
      font-size: 0;
  }
  
  .index-panel-header .btn {
      display: inline-block;
      margin-left: 11px;
      width: 9px;
      height: 9px;
      background: #dedede;
      /*画圆*/
      -moz-border-radius: 5px; /* Firefox */
      -webkit-border-radius: 5px; /* Safari 和 Chrome  */
      border-radius:5px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
      /*for ie7、8*/
      position: relative;
      z-index:2;
      behavior: url(../ie-css3.htc); /* 通知IE浏览器调用脚本作用于'btn'类 */
  }

  ログイン後にコピー

テキストの前後に i タグと span タグを追加すると、疑似要素: before と :after を使用するよりも明確になります。
vertical-align:middle は、行とテキストの垂直方向の中央揃えを実現します。

margin-topを使用して実装できます(前提条件は親要素の高さを知っていることです

<div class="star-bar">
    <span class="star"></span>
    <span class="star"></span>
    <span class="star"></span>
    <span class="star"></span>
    <span class="star nostar"></span>
</div>

.star-bar {
    font-size: 0px;
}

.star {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 5px;
    background: url("../images/index-star.png") no-repeat;
}

.nostar {
    background-position: 0 -10px;
}

• :before と :after を「前」または「後」だけでなく、任意の位置に挿入するために使用できることに注意してください。右側の行を「ボランティアになる」のすぐ下に配置できるようにします。ボタンは連続しているため、border-radius のプロパティを使用してください。

トリック 1: 画像の背景を
に置き換える トリック 2: スクリプト ie- css3.htc を呼び出して、IE ブラウザーが css3 属性をサポートできるようにします

以上がCSS を使用してテキストの周囲にコンテンツを挿入するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。