J'ai un élément avec les propriétés CSS suivantes:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">My Site</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Sign Up</a>
</li>
<li><a href="#">Login</a>
</li>
</ul>
</div>
</div>
</nav>
3 Réponses :
Vous pouvez utiliser p> : après code> pseudo élément pour créer une ligne au lieu de texte-décoration Code> et définir position: absolu code> pour positionner : Après code> élément.
<ul>
<li>
<a class="active" href="#">Sign Up</a>
</li>
</ul>
Bien que cela fonctionne, cela le crée au-dessus de l'élément. Y a-t-il de toute façon que cette ligne reste au-dessus du texte similaire à la manière dont la décoration de texte : surligne; fonctionne? Si cela n'a pas de sens, je peux montrer une image de ce dont je parle.
Eh bien, une option serait de régler le rembourrage et la hauteur, jsfiddle.net/lg0wyt9u/1123
Vous ne pouvez pas régler l'épaisseur de la décoration de texte.
Vous pouvez toutefois simuler une surligne similaire à la décoration de texte, mais où vous pouvez changer la largeur en utilisant ... p>
bordure-top code> et la bonne ammont de TOP TOP code>. Ici vous pouvez spécifier le bordure-largeur code> comme vous le souhaitez. LI>
-
:: avant code> pseudoplement, vous pouvez spécifier la hauteur code> pour être aussi grosse ou petite au besoin. LI>
ol> p>
<a href="#0" class="overline-default">overline default</a>
<a href="#0" class="overline-border">overline with border</a>
<a href="#0" class="overline-before">overline with ::before</a>
On dirait que votre échantillon de code est un soulignement. Je cherche une surcharge.
Ouais je m'excuse pour ça. Je viens de le modifier, désolé.
Une méthode consiste à inclure la bordure supérieure à tout moment, avec une couleur transparente. Ces facteurs de la largeur, qui stabilise l'élément lorsqu'ils interagissent avec une pseudo-classe, tels que change simplement la couleur sur : actif code>, p> : actif code> ou : survol code>. : survol code>, etc. Voici un exemple: p>
<nav>
<div><span>nav item</span></div>
<div><span>nav item</span></div>
<div><span>nav item</span></div>
<div><span>nav item</span></div>
</nav>
Ok maintenant si la hauteur de l'élément est plus grande que la bordure se reposera toujours au sommet du conteneur DIV. Est-ce qu'il y a de toute façon pour que cela se repose sur le texte lui-même au lieu d'au sommet du conteneur DIV? Plus similaire à la façon dont texte-décoration: surligne; fonctionne ou non?
Oublié de mentionner cela il y a quelques jours. Mais cette solution est réellement grande car à l'intérieur de la balise A enroulant le texte dans un span et ajoutant une bordure à cela fonctionne vraiment bien. Serait génial si les extraits de code liés directement au code que j'ai fourni, mais il était facile de s'adapter à mes besoins. Je vous remercie beaucoup pour votre aide!