Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript jQuery Basics (2014) Creating a Password Confirmation Form Perfect

Shaheer Mir
Shaheer Mir
11,599 Points
Posted by Shaheer Mir
Shaheer Mir
11,599 Points

Span CSS

Hi, I am coming back to this project after a while. I have noticed that the spans containing the "error messages" resemble the chat message shape. I have checked the CSS file multiple times but I can't find the code that gives these spans this shape.

If someone could please help me out in this matter, I'd greatly appreciate it! Thank you!

2 Answers

jcorum
jcorum
71,830 Points

In the style.css file there is a rule for the span itself, and then a rule for span:after

span {
  border-radius: 5px;
  display: block;
  font-size: 1.3em;
  text-align: center;
  position: absolute;
  background: #2F558E;
  left: 105%;
  top: 25px;
  width: 160px;
  padding: 7px 10px;
  color: #fff;
}
span:after {
  right: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(136, 183, 213, 0);
  border-right-color: #2F558E;
  border-width: 8px;
  margin-top: -8px;
}

If you inspect the span element in the browser (right-click on the span and then click Inspect Element) you can see the css rules. Try unchecking the check box next to span:after border.

P.S., these instructions are for Chrome. Not sure if they are the same for other browsers.

Fernando Gomez
Fernando Gomez
18,527 Points
Fernando Gomez
Fernando Gomez
18,527 Points

Hello Shaheer,

check this out. It will give you an idea how the chat message shape was made.

Fernando Gomez
Fernando Gomez
18,527 Points
Fernando Gomez
Fernando Gomez
18,527 Points

the span:after rule is what making the chat message shape and the span rule is making the block with the text in it.