• Accueil
  • Info
  • Publicité
  • Privacy & Policy
  • Nous Contacter
No Result
View All Result
Technique de pointe
  • Actualité
  • Technologies
  • Jeu vidéo
  • Mobile
  • Astuces
  • HTML5 / CSS
  • Java Script
  • PHP
  • Article Sponsorisé
  • Astuces
  • Jeu vidéo
  • Nous Contacter
MYCAMER
  • Actualité
  • Mobile
  • Jeu vidéo
    Mario Kart Sketch de Pedro Pascal est votre nouvelle série préférée

    Mario Kart Sketch de Pedro Pascal est votre nouvelle série préférée

    Microsoft va ruiner Master Chief entre ‘Halo Infinite’ et Paramount si ce n’est pas prudent

    Microsoft va ruiner Master Chief entre ‘Halo Infinite’ et Paramount si ce n’est pas prudent

    Concentrez votre énergie : les stocks de jeux vidéo en 2023

    Concentrez votre énergie : les stocks de jeux vidéo en 2023

    Quelle est la durée idéale d’un jeu vidéo ?  –

    Quelle est la durée idéale d’un jeu vidéo ? –

    Une plateforme de jeu vidéo pour améliorer la fonction exécutive

    Une plateforme de jeu vidéo pour améliorer la fonction exécutive

    10 tropes de jeux vidéo qui n’ont aucun sens

    10 tropes de jeux vidéo qui n’ont aucun sens

    Dead Space Remake – Dans le vide (Chapitre 7)

    Dead Space Remake – Dans le vide (Chapitre 7)

    Sony brevète un « coach d’inventaire de jeux vidéo » pour aider les joueurs indécis dans la gestion des stocks

    Sony brevète un « coach d’inventaire de jeux vidéo » pour aider les joueurs indécis dans la gestion des stocks

    10 boss de jeux vidéo les plus hilarants involontairement

    10 boss de jeux vidéo les plus hilarants involontairement

  • Developpement web
    • All
    • Java Script
    • Language HTML5
    Arrêtez d’appeler les langages de programmation HTML et CSS |  de Christophe Lam |  L’Albatros FOSS |  février 2023

    Arrêtez d’appeler les langages de programmation HTML et CSS | de Christophe Lam | L’Albatros FOSS | février 2023

    Vous voulez devenir UI/UX Designer ?  Consulter la liste des stages

    Vous voulez devenir UI/UX Designer ? Consulter la liste des stages

    Techids : un événement inspirant pour les jeunes passionnés de technologie

    Techids : un événement inspirant pour les jeunes passionnés de technologie

    Un couple ouvre un centre d’apprentissage Code Wiz à FishHawk Ranch

    Un couple ouvre un centre d’apprentissage Code Wiz à FishHawk Ranch

    Codecademy élargit ses offres avec des fonctionnalités améliorées pour les demandeurs d’emploi, un nouveau produit pour les upskillers

    Codecademy élargit ses offres avec des fonctionnalités améliorées pour les demandeurs d’emploi, un nouveau produit pour les upskillers

    L’Etat demande au centre de livrer 14 bateaux agréés pour la sécurité côtière |  Nouvelles de Bombay

    L’Etat demande au centre de livrer 14 bateaux agréés pour la sécurité côtière | Nouvelles de Bombay

    Croissance des ventes au détail de 7,5 % en glissement annuel, le chiffre d’affaires ne parvient pas à suivre

    Croissance des ventes au détail de 7,5 % en glissement annuel, le chiffre d’affaires ne parvient pas à suivre

    Analysis of dog breed diversity using a composite selection index

    Nouvelles FE |  Avez-vous les compétences que rechercheront les employeurs en 2023?

    Nouvelles FE | Avez-vous les compétences que rechercheront les employeurs en 2023?

  • Astuces
    4 villes en plein essor en 2023 à considérer pour une vie abordable

    4 villes en plein essor en 2023 à considérer pour une vie abordable

    L’équipe de formation WordPress recherche des commentaires avec une enquête individuelle sur les apprenants – WP Tavern

    L’équipe de formation WordPress recherche des commentaires avec une enquête individuelle sur les apprenants – WP Tavern

    10 meilleurs sites Web GPL pour télécharger des plugins de thèmes GPL 2023

    10 meilleurs sites Web GPL pour télécharger des plugins de thèmes GPL 2023

    Ukraine à J+341 : Killnet frappe les hôpitaux américains.

    Ukraine à J+341 : Killnet frappe les hôpitaux américains.

    6 Best WordPress SEO Plugins for 2023

    6 Best WordPress SEO Plugins for 2023

    Amorcer un document Quarto {ojs} avec un bloc-notes observable

    WordPress Password Protection – A Complete Guide

    La vulnérabilité du plugin anti-spam WordPress affecte jusqu’à 60 000 sites

    La vulnérabilité du plugin anti-spam WordPress affecte jusqu’à 60 000 sites

    Comment déployer facilement une application full-stack dans Portainer avec des templates

    Comment déployer facilement une application full-stack dans Portainer avec des templates

    Microsoft dévoile le nouveau plugin IndexNow pour les sites WordPress

    Comment créer un site Web WordPress

  • Nous contacter
No Result
View All Result
MYCAMER
No Result
View All Result
Home Developpement web Language HTML5

Comment positionner un pseudo-élément pour souligner du texte – HTML & CSS – SitePoint Forums

Caleb by Caleb
mai 27, 2022
in Language HTML5
0
0
Le bouton d’envoi des formulaires ne fonctionne pas ?  – HTML & CSS – Forums SitePoint
334
SHARES
2k
VIEWS
Share on FacebookShare on TwitterRedditLinkedinWhatsappTelegram


Salut,

Je travaille actuellement sur mon site personnel pour pratiquer mon codage et j’ai récemment découvert le potentiel des pseudo éléments pour le design.

Je voudrais utiliser un pseudo-élément pour souligner un texte.

J’ai réussi à concevoir un pseudo-élément pour souligner mon titre mais j’ai quelques problèmes pour le positionner correctement sous mon texte.

<div class="Resume">

  <div class="Education">

    <h2>Education</h2>

    <ul>
      <li>Education #1</li>
      <li>Education #2</li>
      <li>Education #3</li>
    </ul>
  </div>

  <div class="Experience">

    <h2>Experience</h2>

    <ul>
      <li>Experience #1</li>
      <li>Experience #2</li>
      <li>Experience #3</li>
    </ul>
  </div>
</div>
.Resume {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    text-align: center;
}

.Resume h2 {
    font-size: 40px;
    padding: 50px;
    letter-spacing: 4px;
    font-weight: bold;
    text-transform: uppercase;    
}

/* Pseudo element line */
/* Reaadpt line under education experience */
.Resume h2::after {
    content: '';
    display: block;
    position: absolute;
    background-color: #7D7465;
    height: 10px;
    width: 20%;
}

En ligne CodePen Code

J’ai essayé d’utiliser gauche-droite / haut-bas mais cela ne fonctionne pas et ne peut pas le positionner correctement sous mon texte.
Merci d’avance pour votre aide.



PaulOB


27 mai 2022, 11h05


#2

fgaascht :

J’ai essayé d’utiliser gauche-droite / haut-bas mais ça ne marche pas

Si vous faites la largeur du contenu h2 en utilisant un rétrécissement pour s’adapter au type d’affichage tel que display:inline-flex alors vous pouvez utiliser gauche et droite sur le pseudo élément pour correspondre exactement à la largeur du texte (plus son rembourrage) sans utiliser de magie chiffre comme 20 %.

Modifiez vos 2 règles comme suit.

.Resume h2 {
  font-size: 40px;
  padding: 50px;
  letter-spacing: 4px;
  font-weight: bold;
  text-transform: uppercase;
  display: inline-flex; /* shrink to fit*/
  margin: 0;
  position:relative;/* stacking context for pseudo element */
}

/* Pseudo element line */
/* Reaadpt line under education experience */
.Resume h2::after {
  content: "";
  /*display: block; not needed when position:absolute used in this case*/
  position: absolute;
  background-color: #7d7465;
  height: 10px;
  bottom:20px;
  left: 0;/* match width of text and padding*/
  right: 0;/* match width of text and padding*/
  /* width: 20%;*/
}

Capture d'écran 2022-05-27 à 12.05.59

Si vous voulez la ligne uniquement sous le texte, utilisez left:50px et right:50px pour correspondre à votre rembourrage (ou bien supprimez le rembourrage gauche et droit).

Capture d'écran 2022-05-27 au 12.10.19

Pour éviter les erreurs, je vous suggère d’utiliser des minuscules dans vos règles plutôt que de dire .Resume utilisez .resume à la place. Cela rend juste la vie plus facile :slight_smile:

Il existe d’autres façons d’obtenir le soulignement, mais je suppose que vous vous entraîniez de toute façon avec le pseudo-élément :slight_smile:

— to www.sitepoint.com

Get real time update about this post categories directly on your device, subscribe now.

Unsubscribe
Caleb

Caleb

Stay Connected

  • 87k Followers
  • 172k Subscribers

Articles populaires

  • 10 problèmes courants de l’iPhone 13 et comment les résoudre

    10 problèmes courants de l’iPhone 13 et comment les résoudre

    5603 shares
    Share 2241 Tweet 1401
  • Comment installer phpMyAdmin sur Debian 11 Bullseye (Apache)

    1702 shares
    Share 681 Tweet 426
  • GOLDEN FARM BIZ: earn unlimited money online

    347 shares
    Share 139 Tweet 87
  • Étapes pour installer MySQL sur Ubuntu 22.04 LTS Jammy Linux

    513 shares
    Share 205 Tweet 128
  • Comment réparer le décalage d’Instagram sur iPhone et Android

    711 shares
    Share 284 Tweet 178

Follow Our Page

Follow Us

    Go to the Customizer > JNews : Social, Like & View > Instagram Feed Setting, to connect your Instagram account.
Facebook Twitter Youtube Vimeo Instagram

Informer et distraire les internautes en toute indépendance avec un grand souci de la qualité et de contenu.

Category

  • Actualité
  • Article Sponsorisé
  • Astuces
  • Developpement web
  • Featured
  • Java Script
  • Jeu vidéo
  • Language HTML5
  • Mobile
  • portrait
  • Technologies
  • Uncategorized

Recent News

Découvrez comment ces fantastiques portraits ont été réalisés avec une seule lumière

Découvrez comment ces fantastiques portraits ont été réalisés avec une seule lumière

février 6, 2023
Les spin-offs de la NASA présentent les technologies développées par Stennis de la NASA – Picayune Item

Les spin-offs de la NASA présentent les technologies développées par Stennis de la NASA – Picayune Item

février 5, 2023

© 2023 mycamer.net - Technologies de pointe & magazine Hébergé par World-reseller.com.

No Result
View All Result
  • Actualité
  • Mobile
  • Jeu vidéo
  • Developpement web
  • Astuces
  • Nous contacter

© 2023 mycamer.net - Technologies de pointe & magazine Hébergé par World-reseller.com.

Welcome Back!

Sign In with Facebook
Sign In with Google
Sign In with Linked In
OR

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
fr French
ar Arabiczh-CN Chinese (Simplified)en Englishfr Frenchde Germanit Italianru Russianes Spanish

Add New Playlist

This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.