web-dev-qa-db-ja.com

インライン要素の上端に対して絶対的に相対的な疑似要素の後のコンテンツの配置

:after疑似要素内のコンテンツを別の要素の絶対相対おそらく複数行-要素の上端に配置するCSSのみの方法を探しています。結果は次のようになります。

Result demonstration

通常、これをアーカイブするためのロケット科学は含まれていませんが、次の基準も満たすソリューションを見つけたいと思います。

  • :before疑似要素を使用しないでください（これは、他の独立したことを実現するためにすでに必要です）、
  • インライン要素にdisplay: block/inline-block;を使用しないでください（テキストフローに醜い穴が作成されるため）、
  • 要素の幅を、含まれている要素のパーセンテージとして定義できるようにします（少なくとも3つのルールを適用した後）。
  • :after-疑似要素の上部の位置/マージン/パディングを、祖父母要素内の親要素の位置、親要素の高さ、または実際の要素の高さに依存するような方法でハードコーディングしないでください（または短くする：コンテンツに依存するものを作成しないでください）、
  • 追加のHTML要素を挿入しないでください。
  • jSを追加しないでください。

Codepen を作成しました。これにより、ここで何をしようとしているのかを簡単に把握できるようになります。

上記の制限の1つに違反することで結果を簡単に得ることができることを知っています（Codepenに示されているように）が、私はエレガントな解決策を探していますこれが必要とされないこの問題。

かなり長い間これをいじった後、それは不可能だと思いますが、誰かが私に反対のことを納得させることができれば素晴らしいでしょう-または少なくとも正式にそれが実際には不可能であることを証明します。事前に助けてくれてありがとう。

csslayoutcss-positionpseudo-element
11
bfncs

まあ、必要な方法で可能な唯一の解決策はこれである可能性があります。

-最初に言及するのは、これが機能するためには、_::after_ contentを直接定義する必要があるということです。 CSSでは、_data-_属性ではありません。 （理由はわかりませんが、構文解析の問題のようです。）

-_position:relative_を_.wrapper_に設定します。 _::after_ _left-right_をその親（直接の親ではない）に基づいて移動するため。

-_width: 100%_を_::after_（親の100％）に設定

-_white-space: pre_を_::after_に設定-これは重要です

-_\A_（エスケープ文字）を使用してcontentを直接記述し、特に単語を分割します場所。

-_top: 0_を設定し、負のright位置を指定します（必要な距離）

注：追加のテキストがラッパーからオーバーフローしている場合は、特定の要素に_Word-wrap: break-Word_を設定する必要がある場合があります。

基本的に、これはCSSの追加/変更です。

_.wrapper {
  position: relative;
}

.accent::before{
    position: absolute;
    width: 100%;
    content: "Unfortunately \A it is aligned with \A the last line of said span.";
    white-space: pre;
    right: -70%;
}

.content p {
    Word-wrap: break-Word; /* in my example <p> was problematic */
}
_

注：この方法がレスポンシブデザインにどれほど優れているかはわかりません。そのように試したことはありません。

FFとChromeでテスト済み。
実例

編集：
うーん、ええ、私は_::after_から始めましたが、誤って_::before_ =）に切り替えました

了解しました。CSSに小さな変更を加えました。

-_width: 100%_の代わりに_width: auto_を設定します

-_top: 0_の代わりに、手動で（申し訳ありませんが）margin-top: -(number)px-ラッパー自体に基づいてトップの位置を設定するため、topは使用しないでください。

-right: -(number)%をright: -(number)pxに切り替えます

CSSの変更：

_.accent::after{
    width: auto;
    right: -50px;
    margin-top: -40px;
    /* and remove "top" property completely */
}
_

実例

別の編集
content: attr(data-meta)を使用できるよりクリーンな作業ソリューション（_white-space: pre_を削除し、widthを必要なパーセンテージサイズに設定：

_.accent::after{
    position: absolute;
    width: 30%;
    content: attr(data-meta);
    right: -50px;
    margin-top: -40px;
}
_

実例

3
Davion

これらの要件で私は試しました：

  • ::after要素でbottom[？] プロパティを使用する、または
  • usingtranslateY[？] プロパティ

例： http://jsfiddle.net/csdtesting/w4zvmbjh/

<div class="wrapper">
    <div class="content">
         <h2>1-Unfortunately it doesn't work with multline content</h2>

        <p>Pellentesque ultrices sed quam pellentesque, eu ultricies nulla semper.
            <label for="pretty" class="accent" data-meta="Unfortunately it is aligned with the last line of said span.">Etiam leo ligula, laoreet eget urna et, dignissim facilisis nisi ante.</label>Duis gravida lectus tellus, sed rutrum nisi ultricies a. Aliquam pellentesque ante at ipsum convallis porta.</p>
         <h2>2-Unfortunately it doesn't work with multline content</h2>

        <p>Pellentesque ultrices sed quam pellentesque, eu ultricies nulla semper. <span class="accent-bottom" data-meta="Unfortunately it is aligned with the last line of said span.">Etiam leo ligula, laoreet eget urna et, dignissim facilisis nisi ante.</span> Duis gravida lectus tellus, sed rutrum nisi ultricies a. Aliquam pellentesque ante at ipsum convallis porta.</p>
    </div>
</div>

label
{
    color:red !important;
}

/* Basic typo (not problem related) */
body {
  font-family: Georgia, serif;
  font-size: 82.5%;
  line-height: 1.167;
  color: #555;
}

h1, h2 {
  color: #222;
}

h1 {
  font-size: 1.167em;
}

h2 {
  font-size: 1em;
}

/* Problem related styles */

.wrapper {
  position: relative;
  width: 580px;
  margin: 2em auto;
}

.content p {
  width: 62.069%;
}

.accent {
  color: cornflowerblue;
  &:after {
    content: attr(data-meta);
    position: absolute;
    right: 0;
    width: 31.035%;
    transform:translateY(-50%)

  }
}

.accent-bottom {
  color: cornflowerblue;
  &:after {
      content: attr(data-meta);
    position: absolute;
    right: 0;
    width: 31.035%;
    bottom: 14%;
  }
}
0
Giannis Grivas