empêche l'élément :after de passer à la ligne suivante

Question

J'ai ce HTML :

<ul>
    <li class="completed"><a href="#">I want the icon to stay on the same line as this last <strong>word</strong></li>
</ul>

J'ajoute une icône à l'aide du pseudo-élément :after :

ul li.completed a:after {
    background:transparent url(img.png) no-repeat; 
    content: '';
    display:inline-block;
    width: 24px;
    height: 16px;
}

Le problème : si la largeur disponible est trop petite, l'icône s'enroule sur la ligne suivante. Je voudrais qu'elle reste sur la même ligne que le dernier mot du lien auquel elle est jointe :

Est-ce possible, sans ajouter 'nowrap' à l'ensemble du lien (je veux que les mots soient enveloppés, mais pas l'icône).

Voir jsFiddle aquí .

Answer 1

J'ai essayé de résoudre ce problème avec un bouton de lien et j'ai eu plus de succès en ajoutant un rembourrage à la droite de l'élément comme l'a suggéré @Hugo Silva, puis en définissant la position absolue du ::after. C'est une solution assez simple qui semble fonctionner sur tous les navigateurs modernes.

.button {
  position: relative;
  color: #F00;
  font-size: 1.5rem;
  padding-right: 2.25rem;
}

.button::after {
  content: '>>';
  display: inline-block;
  padding-left: .75rem;
  position: absolute;
}

Voici un violon JS.

Answer 2

Veillez à terminer la balise avant

<ul><li class="completed"><a href="#">I want the icon to stay on the same line as this last <strong>word</strong></a></li></ul>

Essayez le css ci-dessous. Au lieu d'utiliser "after", utilisez "before" et le flottement à droite.

ul li.completed a:before {
    background:transparent url(img1.png) no-repeat; 
    content: '';
    display:inline-block;
    width: 24px;
    height: 16px;
    float:right;
}

Veuillez vérifier ceci : http://jsfiddle.net/supriti/atcJJ/7/

Answer 3

Il est possible de le faire sans :after . L'élément avec l'arrière-plan doit être display:inline .

<h1><span>I want the icon to stay on the same line as this last word</span></h1>

h1 span {
   padding-right: 24px;
   background: url('icon.svg') no-repeat right top; 
}

http://jsfiddle.net/my97k7b1/

Answer 4

Le problème se produit lorsqu'il y a un espace à la fin du texte de l'élément, de sorte qu'il considère l'icône comme un autre mot. Ma solution consiste à supprimer l'espace blanc avec du javascript et à le placer à l'extérieur de l'élément. De plus, de cette façon, nous évitons que text-decoration:underline stylise l'espace blanc qui peut se trouver à la fin d'un lien :

$(document).ready(function () {
  $("a[href$=\".pdf\"]").each(function () {
    var endspace = /\s$/;
    if (endspace.test($(this).html())) {
      var linktx = $(this).html().replace(/\s*$/, "");
      $(this).html(linktx);
      $(this).after(" ");
    }
  });
});

Dans la css, j'ai ajouté un espace insécable. \00A0 devant l'icône pour la séparer du texte, et pour la mettre à l'échelle en fonction de la taille de la police. Dans certains cas, l'utilisation d'un espace étroit sans séparation \202F offre un meilleur effet visuel :

a[href$=".pdf"]:after {
  content: "\00A0\f1c1";
  font-family: "Font Awesome 5 Pro";
}

https://jsfiddle.net/poselab/910bw7zt/8/

Answer 5

Avec ma configuration particulière, la seule solution qui fonctionnait était d'utiliser la position relative, et de placer mon élément icône dans un span avec une position absolue. Ainsi :

h2 a {
            position: relative;
            width: auto;
}
h2 a span {
            position: absolute;
            right: -30px;
            bottom: 0;
 }

<h2>
    <a href="#">
            The arrow won't drop to the next line as an orphan, even if the text is long and responsive
         <span>&#8594;</span>
    </a>
</h2>