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

CSS

Posted by orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

generated content

Hello,

I have created 2 circles that are supposed to appear along side the text "Generates shapes", but for some reason, my circles appear on different lines.

Would you happen to know how I can make these circles appear next to the text 'Generated' shape

<!DOCTYPE html>
<html>
<head>
    <title>Pseudo-elements</title>
    <style>

    body{
    padding: 1% 26.5%;
    background-color:#e0eef5;
    color:#333;


    }
    p{
    margin:25px 0;
    font: 3em sans-serif;

    }
    a{
    text-decoration:none;
    font:2.5em sans-serif;
    color:royalblue;



    }
    .phone::before, .phone::after{
    content:"\2706";

    }
    .dload::after{
    content:attr(title);
    padding-left:10px;
    font-size:.75em;
    color:tomato;

    }
    .dload::before{
    content:url(pdf.png);
    margin: 0 8px;

    }
    .box::before, .box::after{
    content:"";
    display:inline-block;
    width:30px;
    height:30px;
    background:royalblue;
    border-radius:50%;
    margin:15px 15px 0 15px;


    }
    .box {
    border:1px solid black;
    padding:10px;

    }
  </style>
</head>
<body>
    <p class="phone">
        555-867-5309
    </p>

    <a class="dload" href="examples.pdf" title="- PDF"> 
        Download File
    </a>
    <div class="box">
    <p>Generated shapes</p>
    </div>
</body>
</html>

3 Answers

Kristen Law
Kristen Law
16,244 Points

I believe your paragraph rule needs to have display: inline-block as well.

p{
    margin:25px 0;
    font: 3em sans-serif;
    display: inline-block; //add this
}
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

I knew there was an easy solution. Thanks Kristen!

Joseph Greevy
Joseph Greevy
4,990 Points
Joseph Greevy
Joseph Greevy
4,990 Points

Try making the display inline. I cant offer much more help I dont even know which element is your circle.

orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Have you taken the basic css course? Do you remember generated content chapter? the rule below creates 2 circles. Sorry display:inline does not work

.box::before, .box::after{ content:""; display:inline-block; width:30px; height:30px; background:royalblue; border-radius:50%; margin:15px 15px 0 15px;