0
votes

border-bottom ne fonctionne pas dans la section pseudo-sélecteur: après HTML, CSS

Mon code est ci-dessous mais il ne fonctionne pas. Je veux ajouter une ligne pointillée après chaque section qui a une largeur de 100%.

section::after {
    border-bottom: 1px dotted red;
}


3 commentaires

montrez-nous le reste de votre code


Les pseudo éléments nécessitent la propriété 'content' .


vrai, mais ne vous donnera pas de ligne sur la page


3 Réponses :


2
votes

il suffit de supprimer :: après que les bordures s'appliquent aux éléments. l'ajout de contenu ne créera pas de ligne sur la page. Je ne sais pas pourquoi cela a été rejeté. Cela fonctionne et est assez simple.

<section></section>
section {
    border-bottom: 1px dotted red;
}


0 commentaires

0
votes

Peut-être que ul fonctionnera pour vous,

HTML:

ul li {
    border-bottom: 2px dotted #ccc;
}

CSS:

<ul>
    <li><span>Name:</span></li>
    <li><span>Age:</span></li>
</ul>


0 commentaires

0
votes

J'espère que cela fonctionne pour vous:

<!DOCTYPE html>
<html>

<head>
  <style>
    section {
      display: block;
      width: 100%;
    }
    
    section::after {
      content: " ";
      display: block;
      width: 100%;
      border: 2px solid red;
    }
  </style>
</head>

<body>

  <section>
    <h1>WWF</h1>
    <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
  </section>


2 commentaires

Merci à tous pour vos réponses. Spécialement @Abhishek Pakhare, merci, cela a fonctionné.


Vous êtes les bienvenus 😁 Je suis heureux que cela ait fonctionné pour vous. Tous mes vœux.