A Pen by Matt Studdert

This awesome code was written by stooderrr, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright stooderrr ©


  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

  <meta charset="UTF-8">
  <title>A Pen by  Matt Studdert</title>
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">



  <h1>FEWD Pseudo-elements</h1>

<section class="bubble speech-bubble">
  <h2>Speech bubble</h2>

<section class="bubble thought-bubble">
  <h2>Thought bubble</h2>
  <script src='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'></script>




/*Downloaded from https://www.codeseek.co/stooderrr/a-pen-by-matt-studdert-egVwmY */
body {
  font-family: sans-serif;
  text-align: center;

h1 {
  font-size: 3rem;  

h2 {
  font-size: 2rem;

p {
  position: relative;

.bubble {
  background-color: tomato;
  color: white;
  border-radius: 50px;
  display: inline-block;
  margin: 2rem 0 6rem;
  padding: 2rem 6rem;
  position: relative;

.speech-bubble:before {
  border-style: solid;
  border-width: 25px 25px 0 25px;
  border-color: tomato transparent transparent transparent;
/*   content: ""; */
  width: 0;
  height: 0;
  position: absolute;
  bottom: -20px;
  left: 40px;

.thought-bubble:before {
  position: absolute;
/*   content: ""; */
  height: 50px;
  width: 50px;
  background-color: tomato;
  border-radius: 50%;
  bottom: -60px;
  left: 30px;

.thought-bubble:after {
  position: absolute;
/*   content: ""; */
  height: 25px;
  width: 25px;
  background-color: tomato;
  border-radius: 50%;
  bottom: -90px;
  left: 20px;