web-dev-qa-db-ja.com

：before、：after、およびpadding

私は次のcssコードを持っています：

.readMore:before {
    content: '';
    display: block;
    float: left;
    width: 10px;
    height: 27px;
    margin: 0;
    background: red url('images/button.png');
    background-position: 0 0;
}

.readMore {
    float: left;
    height: 24px;
    background: url('images/button.png');
    background-position: -10px 0;
    border: 0;
    margin: 0;
    padding: 4px 0 0 0;
    cursor: pointer: 
}

.readMore:after {
    content: '';
    display: block;
    float: right;
    width: 10px;
    height: 27px;
    margin: 0;
    top: -3px;
    background: red url('images/button.png');
    background-position: -411px 0;
}

次のようなリンクのスタイルを設定します。 enter image description here

しかし、垂直方向の.readMoreのテキストを調整しようとすると、：beforeおよび：after画像も「ジャンプ」します。どちらが論理的ですが、「全体像」とよりよく一致するように解決策はありますか？

cssimagehyperlinkpadding
15
JohnSmith

私は：beforeおよび：after要素にabsolute配置を使用する傾向があります。次に、疑似要素がどこにでも移動することを心配することなく、親にしたいことをすべて実行できます（もちろん、要素自体を移動する場合を除きます）。

JSFiddleで表示

html

<div></div>

cSS

div {
  position: relative;
  background: #eee;
  width: 25px;
  height: 25px;
  margin: 30px 0 0 30px;
}
div:before {
  position: absolute;
  width: 10px;
  height: 25px;
  top: 0;
  left: -10px;
  content:"";
  background: #222;
}
div:after {
  position: absolute;
  width: 10px;
  height: 25px;
  top: 0;
  right: -10px;
  content:"";
  background: #222;
}

これは私がそれらをどのようにレイアウトするかを示しています。次に、親内のテキストの位置を調整する方法を使用できます。

上記のコードの要点は次のとおりです。

  1. 親は相対的に配置されています。これにより、その子である疑似要素に絶対配置を使用して、それらを親に対して相対的に配置できます。
  2. 要素をボーダーからボーダーにしたい場合、それぞれ前と後の要素の左と右の位置はそれらの幅に等しくなります。

親divのテキストを垂直方向に中央揃えにしたい場合、それが1行だけであれば、line-heightをコンテナーの高さに等しく設定できます。 ここで表示 。これは、パディングを「推測」して垂直方向に中央揃えにするよりも優れています。

もちろん、テキストを垂直方向に中央揃えする他の方法もあるので、SO主題についての質問がたくさんあります これは1つだけです 。

24
jamesplease