How to create a white border circle having white exclamation mark inside a box having a yellow background in html/css?

Question

I am trying to create a white border circle having a white exclamation mark inside a yellow background box. The HTML and CSS code of the yellow background box is:

HTML:

<p class="my-paragraph-style">List your dependents and enter their personal information. Pay close attention to information regarding your spouse’s smoking habits.</p>

CSS:

.dependents  .my-paragraph-style
{
    background: #EABB27;
    padding: 20px;
    line-height: 1.4;
    position: relative;
    top: -25px;
}

The pictorial representation of the yellow background box which I have got from the above code (HTML and CSS) is:

My task is to make a white border circle having a white exclamation mark inside a yellow box. Below is an image what I exactly want inside a yellow background box:

In order to achieve that, I have cropped the circle from the section of a yellow background box. After cropping it, I have used the following CSS code in order to get the circle inside the box.

@media screen and (max-width: 767px) and (min-width: 320px)
{
.info-mobile-header-sections 
{ /* Info icon for header parts of sections */
    background: url(img/147811205179656.png) no-repeat;
    margin-top: -3px;
    position: absolute;
    z-index: 200;
    left: 15px;
}
}

The 147811205179656.png is a cropped image from the section of a yellow box.

By using the above CSS code, I am able to get only some section of the circle inside the yellow box and that too not aligned properly. Let me know if I am following the right approach.

Answer 1

No need to use an image here, it's easier, faster, more scalable and flexible to use a pseudo element like ::before here:

.my-paragraph-style {
  background: #EABB27;
  padding: 20px 20px 20px 50px;
  line-height: 1.4;
  position: relative;
  font-family: arial, helvetica, sans-serif;
  color: white;
  font-weight: bold;
  font-size: 14px;
  max-width: 300px;
}
.my-paragraph-style::before {
  display: block;
  position: absolute;
  left: 20px;
  top: 23px;
  content: "!";
  border-radius: 50%;
  border: 1px solid yellow;
  width: 20px;
  height: 20px;
  line-height: 22px;
  text-align: center;
  color: yellow;
  font-weight: normal;
}

<p class="my-paragraph-style">List your dependents and enter their personal information. Pay close attention to information regarding your spouse’s smoking habits.</p>

Answer 2

You can create that with just :before pseudo-element and Flexbox.

.my-paragraph-style {
  background: #EABB27;
  padding: 20px;
  max-width: 300px;
  display: flex;
  color: white;
}
.my-paragraph-style:before {
  flex: 0 0 30px;
  height: 30px;
  border: 1px solid white;
  margin-right: 20px;
  border-radius: 50%;
  content: '!';
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

<p class="my-paragraph-style">List your dependents and enter their personal information. Pay close attention to information regarding your spouse’s smoking habits.</p>