undefined

undefined

One big advantage of using BridgeCSS is that since it is just normal SCSS it is very easy to create effects using pseudo elements.

Here we will give a few examples of common ways to use pseudo elements for cool effects on your site.

Popup menu arrow

.arrow {
    position: absolute;
    width: 10px;
    height: 10px;
    top: 0px;

    &::after {
      content: " ";
      position: absolute;
      top: -4px; 
      left: 0;
      transform: rotate(45deg);
      width: 10px;
      height: 10px;
      background-color: $gray-300;
      box-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
    }
}

Animated underline on hover

a.underline {
	display: flex;
	height: 100%;
	align-items: center;
	color: $gray-800;
	font-weight: 700;
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-decoration: none;
	transition: color 0.2s linear;
	position: relative;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);

	&:before,
	&:after {
		position: absolute;
		content: '';
		border-bottom: 2px solid $blue-600;
		@include dark {
			border-bottom: 2px solid $blue-300;
		}
		border-radius: 1em;
		bottom: 1em;
		transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
	}

	&:before {
		width: 1em;
		transform-origin: left;
	}

	&:after {
		width: 82%;
		left: 1em;
		transform: translateX(110%);
	}

	&:hover {
		color: $gray-600;
		@include dark {
			color: $gray-300;
		}

		&:before {
			transform: scaleX(0.3);
		}

		&:after {
			transform: translateX(0);
		}
	}
}

Custom bullet points

Sometimes you might want to add custom ordered or unorded bullet points. That’s very straightforward using pseudo elements.

ol {
	list-style: none;
  counter-reset: list;

	li {
		@include pl(2);
    counter-increment: list;
    display: flex;
    align-items: center;

		@include dark {
			color: $gray-400;
		}

		&::before {
      display: flex;
      align-items: center;
      justify-content: center;
      @include mr(4);
      content: counter(list);
  		color: $gray-100;
      width: spacing(6);
      height: spacing(6);
      background-color: $gray-600;
      border-radius: spacing(1);
      font-weight: bold;
      @include px(1);
      @include text-sm;
		}
	}
}

1. This example bullet
2. Second example

Typewriter

A somewhat common effect on websites that feature code show a typewriter animation. This can be achieved in pure CSS as long as you know the number of characters in advance (otherwise you’ll need to calculate that in javascript)

.typewriter {
  font-family: 'Fira Mono';
  position: relative;
  width: max-content;

  &::before,
  &::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }

  &::before {
    background: $slate-900;
    animation: typewriter 6s steps(29) 1s forwards;
  }

  &::after {
    width: spacing(1);
    background: $white;
    animation: typewriter 6s steps(29) 1s forwards,
               blink 700ms steps(29) infinite;
  }
}

@keyframes typewriter {
  to {
    left: 100%;
  }
}

@keyframes blink {
  to {
    background: transparent;
  }
}