Skip to content

Instantly share code, notes, and snippets.

@belachkar

belachkar/before & after css.md

Last active November 8, 2021 02:40
Show Gist options
  • Save belachkar/e7b41e225e919dfd33dd0b5923345636 to your computer and use it in GitHub Desktop.
Save belachkar/e7b41e225e919dfd33dd0b5923345636 to your computer and use it in GitHub Desktop.
Download ZIP
::before & ::after css
Raw
before & after css.md

::before & ::after

The content property

source code: codepen.io

index.html:

<h1 class="intro">Here is some generic content</h1>

<blockquote>This is a blockquote, where I could have a testimonial talking about how great my services are</blockquote>

<p>Lorem ipsum <a href="#" data-tool-tip="a cool tool tip">dolor sit amet</a>, consectetur adipiscing elit. Nulla a efficitur nisi, id vulputate nulla. Donec dictum nulla et ipsum imperdiet suscipit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent bibendum sodales est, nec eleifend urna finibus nec. </p>


<div class="decorations">
  <h1>We can decorate sections!</h1>
  <h2 class="section-with-deco">Section title here</h2>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  <h2 class="section-with-deco">Section title here</h2>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  <h2 class="section-with-deco">Section title here</h2>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  <h2 class="section-with-deco">Section title here</h2>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  <h2 class="section-with-deco">Add add content after links</h2>
  <p>Pellentesque <a href="example.pdf">habitant</a> morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. <a href="https://#" target="_blank">Mauris placerat</a> eleifend leo.</p>
</div>


<div class="counters">
  <h1>We can number sections!</h1>
  <h2 class="section">Section title here</h2>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  <h2 class="section">Section title here</h2>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  <h2 class="section">Section title here</h2>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  <h2 class="section">Section title here</h2>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  <h2 class="section">Section title here</h2>
  <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  <ol>
    <li>I'm a list item</li>
    <li>me too!</li>
    <li>me three</li>
    <li>Hello there</li>
  </ol>
  <ol>
    <li>I'm a list item</li>
    <li>me too!</li>
    <li>me three</li>
    <li>Hello there</li>
  </ol>
</div>

style.scss:

@import url('https://fonts.googleapis.com/css?family=Unica+One|Vollkorn');
@import url('https://use.fontawesome.com/releases/v5.0.6/css/all.css');

$ff-ss: 'Unica One';
$ff-s: 'Vollkorn';

$clr-red: #c31;
$clr-black: rgba(black, 1);
$clr-gray: rgba(black, .7);

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-size: 1rem;
  text-align: center;
  font-family: $ff-s;
  line-height: 1.4;
  color: $clr-gray;
}

h1, h2, h3, h4, h5 {
  font-family: $ff-ss;
  text-transform: uppercase;
  line-height: .9;
  color: #c31;
}

h2 {
  margin-top: 1.2em;
  margin-bottom: 0;
}

p {
  margin-top: .25em;
}

a {
  color: $clr-red;
}

.intro {
  font-size: 5rem;
}


blockquote {
  font-size: 2rem;
  color: $clr-black;
  
  &::before {
    content: open-quote;
  }
  
  &::after {
    content: close-quote;
  }
}

a[data-tool-tip] {
  position: relative;
  
  &::after {
    content: attr(data-tool-tip);
    display: block;
    position: absolute;
    background-color: $clr-gray;
    padding: 1em 3em;
    color: white;
    border-radius: 5px;
    font-size: .8em;
    bottom: 0;
    left: 0;
    white-space: nowrap;
    transform: scale(0);
    transition:
      transform ease-out 150ms,
      bottom ease-out 150ms;
    }
}

a[data-tool-tip]:hover::after {
  transform: scale(1);
  bottom: 100%;
}

.decorations {
  padding: 7em;
}

.section-with-deco::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f0e7';
  display: block;
  margin-bottom: 5px;
}

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

a[href^="http"]::after {
  font-family: 'Font Awesome 5 Free';
  content: ' \f35d';
  font-weight: 900;
  font-size: .8em;
}

.counters {
  background: lightgray;
  text-align: left;
  padding: 5em 8em;
  margin-top: 7em;
  
  counter-reset: counter-name;
}

.section { 
  position: relative; 
  
  ::before {
    counter-increment: counter-name;
    content: counter(counter-name);
    position: absolute;
    left: -2.5em;
    top: -.5em;
    background: white;
    width: 2em;
    height: 2em;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 3px solid $clr-gray;
    color: $clr-gray;
  }
}

.counters ol {
  list-style: none;
}

.counters li::before {
  counter-increment: ordered-list;
  content: 'list item ' counter(ordered-list) ') ';
  font-size: .8em;
  color: $clr-red;
}

Designing awesome stuff - images hover

source code: codepen.io

index.html:

<h1 class="intro">Here is a generic heading</h1>

<div class="container">
  <div class="card">
    <img src="//unsplash.it/400/400" alt="" class="card__img">
    <div class="card__text">
      <h3 class="card__title">Card title</h3>
      <p class="card__body">And here is some text</p>
    </div>
      
    </div>
  <div class="card">
    <img src="//unsplash.it/401/401" alt="" class="card__img">
    <div class="card__text">
      <h3 class="card__title">Card title</h3>
      <p class="card__body">And here is some text</p>
    </div>
    </div>
</div>

<!-- <p class="source">Hover effect inspired by <a href="https://tympanus.net/Development/HoverEffectIdeas/">this codrops article</a></p> -->

style.scss:

@import url('https://fonts.googleapis.com/css?family=Unica+One|Vollkorn');

$ff-ss: 'Unica One';
$ff-s: 'Vollkorn';

$clr-red: #c31;
$clr-black: rgba(black, 1);
$clr-gray: rgba(black, .7);

*, *::before, *::after { box-sizing: border-box }

body {
  font-size: 1rem;
  text-align: center;
  font-family: $ff-s;
  line-height: 1.4;
  color: $clr-gray;
}

h1, h2, h3, h4, h5 {
  font-family: $ff-ss;
  text-transform: uppercase;
  line-height: .9;
  color: #c31;
}

.intro { 
  position: relative;
  display: inline-block;
}

h1::before,
h1::after {
  content: '';
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
}

h1::before {
  background: $clr-red;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  z-index: -2;
}

h1::after {
  height: 101%;
  background: white;
  left: -.1em;
  right: -.1em;
  z-index: -1;
}

h2 {
  margin-top: 1.2em;
  margin-bottom: 0;
}

p {
  margin-top: .25em;
}

a {
  color: $clr-red;
}

.intro {
  font-size: 4rem;
}

blockquote {
  font-size: 2rem;
  color: $clr-black;
  
  &::before {
    content: open-quote;
  }
  
  &::after {
    content: close-quote;
  }
}

.container {
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.card {
  position: relative;
  margin: 1em;
  background: $clr-gray;
  
  &::before,
  &::after {
    content: '';
    position: absolute;
    top: 1.25em;
    bottom: 1.25em;
    left: 1.25em;
    right: 1.25em;
    opacity: 1;
    transition: transform ease-out 250ms;
  }
  
  &::before {
    border-top: 1px solid white;
    border-bottom: 1px solid white;
    transform: scale(0,1);
  }
  
  &::after {
    border-left: 1px solid white;
    border-right: 1px solid white;
    transform: scale(1,0);
  }
  
  &:hover::before {
    transform: scale(1.05, 1);
  }
  
  &:hover::after {
    transform: scale(1, 1.05);
  }
}


.card__img {
  max-width: 100%;
  display: block;
  transition: opacity ease-out 250ms;
}

.card:hover {
  .card__img {
    opacity: .4;
  }
}

.card__text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  opacity: 0;
  transition: opacity ease-out 250ms;
}

.card:hover .card__text {
  opacity: 1;
}

.card__title {
  font-size: 2rem;
  color: white;
  margin-bottom: 0;
}

.source {
  opacity: .8;
  position: absolute;
  width: 100%;
  bottom: 1em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment