Le positionnement du contenu :après le pseudo-élément absolument par rapport à un des éléments inline bord supérieur

Je suis à la recherche d'un CSS seule façon de placer le contenu dans un :after pseudo élément absolue par rapport à l'autre - éventuellement multiligne - élément du bord supérieur. Le résultat devrait ressembler à ceci:

Le positionnement du contenu :après le pseudo-élément absolument par rapport à un des éléments inline bord supérieur

Généralement il n'y a pas la science de fusée impliqués pour obtenir cela, mais j'aimerais trouver une solution qui répond également aux critères suivants:

  • Ne pas utiliser le :before pseudoelement (ce qui est déjà nécessaire pour atteindre certains autres indépendants chose),
  • ne pas utiliser display: block/inline-block; sur l'élément inline (parce qu'il crée des laids des trous dans le flux de texte),
  • permettent de définir la largeur des éléments comme un pourcentage de l'élément conteneur (au moins après l'application de la règle de trois),
  • ne pas coder en dur la position supérieure/margin/padding de la :after-pseudo-élément de quelque manière qui le rend dépendant de l'élément parent de la position à l'intérieur du grand-parent de l'élément, l'élément parent de la hauteur ou de l'élément actuel de la hauteur (ou pour faire court: ne pas faire quoi que ce soit dépendante du contenu),
  • ne pas insérer d'autres éléments HTML, et
  • n'ajoutez pas de JS.

J'ai créé un Codepen qui, espérons-le rend plus facile à saisir ce que je vais faire ici.

Je sais qu'il est facilement possible d'obtenir le résultat en cas de violation de l'une des restrictions énumérées ci-dessus (comme démontré dans le Codepen), mais je suis à la recherche d'un élégant solution à ce problème si ce n'est pas nécessaire.

Après avoir joué avec pendant un certain temps, je dirais qu'il n'est pas possible, mais ce serait génial si quelqu'un pouvait me convaincre du contraire - ou tout au moins formellement prouve qu'il est en fait impossible. Merci beaucoup pour toute aide à l'avance.

Est ::before besoin de quelque chose de sensible à la position, trop? Sinon, vous pouvez l'utiliser.
Le ::after largeur doit être relatif à <p> de mais ses top devrait par rapport à <span>, correct? Je crois que c'est la partie la plus difficile...
Merci pour vos commentaires. @Terry: L'idée de cette question était de trouver une solution sans l'aide de :before par exemple, si c'est déjà utilisé pour autre chose. @Luizgrs: Oui, je pense que c'est l'essence même du problème. Je suis intéressé si il y a une sorte de hack ou solution de contournement se rapportent à ces deux éléments, l'un pour la largeur et l'autre pour le placement à l'horizontale.
Pourquoi doit-il être un ::after pseudo-élément? Ne peut-il pas être un élément réel comme codepen.io/HerrSerker/stylo/GwJhu
Les exigences imposées sont impossibles à satisfaire à l'aide de pure CSS

OriginalL'auteur bfncs | 2014-10-14

  1. 3

    Bien, la seule solution possible avec la méthode pourrait être cette.

    - De mentionner en premier, pour que cela fonctionne, vous devez définir ::after content directement dans le CSS, pas par le biais de data- attribut. (Je ne sais pas pourquoi, mais il semble comme une analyse de problème).

    - Ensemble position:relative à la .wrapper. comme vous allez déplacer ::after left-right basé sur le parent (pas en direct).

    - Ensemble width: 100% à ::after (100% de la société mère)

    - Ensemble white-space: pre à ::after - c'est important

    - Écrire le content directement avec l'aide de \A (caractère d'échappement) pour casser le mot dans des endroits particuliers.

    - Ensemble top: 0 et de lui donner un négatif right position (dans quelle mesure vous voulez)

    Remarque: Vous pouvez avoir besoin word-wrap: break-word sur certains elemenets si le texte déborde hors de l'emballage.

    Fondamentalement, c'est l'ajout/modification de votre 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 */
}

    Remarque: je ne sais pas à quel point cette méthode est souple dessins, jamais essayé de cette façon.

    Testé sur FF et Chrome.

    Live exemple

    EDIT:

    Hm, ouais, j'ai commencé avec ::after puis par accident passé à ::before =)

    Bien, des modifications mineures à la CSS:

    - Au lieu de width: 100% ensemble width: auto

    - Au lieu de top: 0 vous devez manuellement (désolé) réduire margin-top: -(number)px - ne pas utiliser top que ça va set top position sur la base de l'emballage lui-même.

    - Commutateur right: -(number)% à right: -(number)px

    CSS modification:

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

    Live exemple

    UN AUTRE MODIFIER

    Nettoyeur de solution de travail où vous pouvez utiliser content: attr(data-meta) (supprimé white-space: pre et définir width voulaient pourcentage de taille:

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

    Live exemple

    Ce n'est pas de répondre aux exigences parce que vous utilisez le ::before pseudo-élément et votre solution ne marche pas du tout lors de l'utilisation de ::after à la place: jsfiddle.net/3hvmq13k/2. Merci beaucoup pour donner un essai, de toute façon.
    Fait un edit pour le post.
    Les deux nouvellement suggéré des solutions de briser les exigences qu'ils coder en dur la position supérieure/marge. Dans les deux modifications c'est par rapport à la hauteur de .accent (ne permettant pas pour un autre nombre de lignes à l'intérieur de l'élément, reportez-vous à jsfiddle.net/9xunLj3t). Merci pour votre effort, cependant.

    OriginalL'auteur Davion

  2. 0

    À ces exigences, j'ai essayé:

    • à l'aide de bas [?] bien au ::after élément,ou
    • à l'aide de translateY [?] propriété

    Par exemple: 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%;
  }
}
    Je pense que votre solution ne fonctionne qu'en raison de la longueur du texte. Si vous ajouter du texte supplémentaire à la span data-meta élément le positionnement est éteint.
    Ne peut pas trouver d'autre solution extrait ::avant.Il n'existe aucun moyen.

    OriginalL'auteur Giannis Grivas