Pk19000 Pk19000 - 3 months ago 9
CSS Question

write in div issue because of after/before in css

I have a code that create a sticky note with html and css. But I have problem when I want to write any thing in yellow area.



#slm {
width: 200px;
vertical-align:100%;
height: 150px;
border-radius: 0 0 10% 0/0 0 40% 0;
background-color: yellow;
positon: relative;
}
#slm:before {
content: '';
display: block;
positon: absolute;
width: 50px;
height: 170px;
border-radius: 0 0 80% 0/0 0 50% 0;
background-color: white;
}

<div id="slm">

slm<br>
Hi
</div>





Can any body help me please? Thanks.

Answer

First of all, you have typo in the style position.

Use absolute positioning of the text inside the sticky area by wrapping it in a div.

#slm {
  width: 200px;
  vertical-align:100%;
  height: 150px;
  border-radius: 0 0 10% 0/0 0 40% 0;
  background-color: yellow;
  position: relative;
}
#slm:before {
  content: '';
  display: block;
  position: absolute;
  width: 50px;
  height: 170px;
  border-radius: 0 0 80% 0/0 0 50% 0;
  background-color: white;
}

.text{
      position: absolute;
    top: 10px;
    left: 54px;
    width: 140px;
}
<div id="slm">
   <div class="text">
      slm<br>
      Hi
   </div>
</div>

Comments