communauté Apprendre Bibliothèque d'outils Loisirs

Français

Maison > interface Web > tutoriel CSS > CSS peut-il créer des bordures partielles sans éléments supplémentaires ?

CSS peut-il créer des bordures partielles sans éléments supplémentaires ?

Susan Sarandon

Libérer： 2024-12-03 08:44:10

original

742 Les gens l'ont consulté

Can CSS Create Partial Borders Without Extra Elements?

Surmonter les limitations de longueur des bordures

Question :

Existe-t-il une méthode pour restreindre l'étendue d'une frontière ? Notamment, un

a une bordure inférieure, mais vous désirez une bordure alignée à gauche qui ne s'étend que partiellement vers le haut. Est-il possible d'accomplir cela sans introduire d'éléments supplémentaires dans la page ?

Réponse :

Le contenu généré par CSS offre une solution :

div {
  position: relative;
}

/* Main div for border to extend to 50% from bottom left corner */

div:after {
  content: "";
  background: black;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 50%;
  width: 1px;
}

Copier après la connexion

<div>Lorem Ipsum</div>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source：php.cn

Article précédent：Pourquoi les travées n'acceptent-elles pas la largeur et la hauteur, et comment cela peut-il être corrigé ? Article suivant：Dimensions de l'image HTML : attributs de hauteur/largeur en ligne ou style CSS ?

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2081

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2245

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

1889

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...