How to create a white border circle having white exclamation mark inside a box having a yellow background in...
1
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.
html css
add a comment |
1
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.
html css
add a comment |
1
1
1
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.
html css
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.
html css
html css
asked Nov 3 '16 at 15:54
user5447339
add a comment |
add a comment |
4 Answers
4
active
oldest
votes
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>answered Nov 3 '16 at 16:05
connexoconnexo
22.7k83762
It works, thank you connexo. Just one quick question, in the actual image I want only habits in the last line instead of smoking habits. How can I achieve this ? I tried playing with padding, line-height and font-size in the class .my-paragraph-style but still I wasn't able achieve that. Is there anyway I can achieve it through CSS ?
– user5447339
Nov 3 '16 at 18:04
No, you cannot control the exact point for a linebreak with CSS in that fashion. You need to try and find fitting values for the parameters that influence this (which I would not advise to do since content tends to change often).
– connexo
Nov 3 '16 at 20:14
add a comment |
1
CSS
.my-paragraph-style
{
background: #EABB27;
padding: 40px;
line-height: 1.4;
position: relative;
top: -25px;
}
.my-paragraph-style:before {
content:"!";
position: absolute;
top: 40px;
left: 10px;
color: #fff;
border: 1px solid #fff;
height: 20px;
width: 20px;
text-align: center;
border-radius: 50%
}
Demo
You can tinker with the css as per your liking.
answered Nov 3 '16 at 16:02
Clyde LoboClyde Lobo
7,89452953
add a comment |
0
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>answered Nov 3 '16 at 16:02
Nenad VracarNenad Vracar
72.4k126083
add a comment |
0
.my-paragraph-style {
background: #EABB27;
padding: 20px 20px 20px 50px;
line-height: 1.4;
color: #fff;
}
.my-paragraph-style:before {
content: '!';
height: 20px;
width: 20px;
display: block;
border: 2px solid red;
border-radius: 50%;
text-align: center;
color: red;
float: left;
margin-left: -35px;
}<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>answered Nov 3 '16 at 16:09
Germano PlebaniGermano Plebani
2,22011631
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f40406026%2fhow-to-create-a-white-border-circle-having-white-exclamation-mark-inside-a-box-h%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
4 Answers
4
active
oldest
votes
4 Answers
4
active
oldest
votes
active
oldest
votes
active
oldest
votes
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>answered Nov 3 '16 at 16:05
connexoconnexo
22.7k83762
It works, thank you connexo. Just one quick question, in the actual image I want only habits in the last line instead of smoking habits. How can I achieve this ? I tried playing with padding, line-height and font-size in the class .my-paragraph-style but still I wasn't able achieve that. Is there anyway I can achieve it through CSS ?
– user5447339
Nov 3 '16 at 18:04
No, you cannot control the exact point for a linebreak with CSS in that fashion. You need to try and find fitting values for the parameters that influence this (which I would not advise to do since content tends to change often).
– connexo
Nov 3 '16 at 20:14
add a comment |
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>answered Nov 3 '16 at 16:05
connexoconnexo
22.7k83762
It works, thank you connexo. Just one quick question, in the actual image I want only habits in the last line instead of smoking habits. How can I achieve this ? I tried playing with padding, line-height and font-size in the class .my-paragraph-style but still I wasn't able achieve that. Is there anyway I can achieve it through CSS ?
– user5447339
Nov 3 '16 at 18:04
No, you cannot control the exact point for a linebreak with CSS in that fashion. You need to try and find fitting values for the parameters that influence this (which I would not advise to do since content tends to change often).
– connexo
Nov 3 '16 at 20:14
add a comment |
1
1
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>answered Nov 3 '16 at 16:05
connexoconnexo
22.7k83762
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>.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>.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>answered Nov 3 '16 at 16:05
connexoconnexo
22.7k83762
edited Nov 3 '16 at 16:19
answered Nov 3 '16 at 16:05
connexoconnexo
22.7k83762
answered Nov 3 '16 at 16:05
connexoconnexo
22.7k83762
answered Nov 3 '16 at 16:05
connexoconnexo
22.7k83762
22.7k83762
It works, thank you connexo. Just one quick question, in the actual image I want only habits in the last line instead of smoking habits. How can I achieve this ? I tried playing with padding, line-height and font-size in the class .my-paragraph-style but still I wasn't able achieve that. Is there anyway I can achieve it through CSS ?
– user5447339
Nov 3 '16 at 18:04
No, you cannot control the exact point for a linebreak with CSS in that fashion. You need to try and find fitting values for the parameters that influence this (which I would not advise to do since content tends to change often).
– connexo
Nov 3 '16 at 20:14
add a comment |
It works, thank you connexo. Just one quick question, in the actual image I want only habits in the last line instead of smoking habits. How can I achieve this ? I tried playing with padding, line-height and font-size in the class .my-paragraph-style but still I wasn't able achieve that. Is there anyway I can achieve it through CSS ?
– user5447339
Nov 3 '16 at 18:04
No, you cannot control the exact point for a linebreak with CSS in that fashion. You need to try and find fitting values for the parameters that influence this (which I would not advise to do since content tends to change often).
– connexo
Nov 3 '16 at 20:14
It works, thank you connexo. Just one quick question, in the actual image I want only habits in the last line instead of smoking habits. How can I achieve this ? I tried playing with padding, line-height and font-size in the class .my-paragraph-style but still I wasn't able achieve that. Is there anyway I can achieve it through CSS ?
– user5447339
Nov 3 '16 at 18:04
It works, thank you connexo. Just one quick question, in the actual image I want only habits in the last line instead of smoking habits. How can I achieve this ? I tried playing with padding, line-height and font-size in the class .my-paragraph-style but still I wasn't able achieve that. Is there anyway I can achieve it through CSS ?
– user5447339
Nov 3 '16 at 18:04
No, you cannot control the exact point for a linebreak with CSS in that fashion. You need to try and find fitting values for the parameters that influence this (which I would not advise to do since content tends to change often).
– connexo
Nov 3 '16 at 20:14
No, you cannot control the exact point for a linebreak with CSS in that fashion. You need to try and find fitting values for the parameters that influence this (which I would not advise to do since content tends to change often).
– connexo
Nov 3 '16 at 20:14
add a comment |
1
CSS
.my-paragraph-style
{
background: #EABB27;
padding: 40px;
line-height: 1.4;
position: relative;
top: -25px;
}
.my-paragraph-style:before {
content:"!";
position: absolute;
top: 40px;
left: 10px;
color: #fff;
border: 1px solid #fff;
height: 20px;
width: 20px;
text-align: center;
border-radius: 50%
}
Demo
You can tinker with the css as per your liking.
answered Nov 3 '16 at 16:02
Clyde LoboClyde Lobo
7,89452953
add a comment |
1
CSS
.my-paragraph-style
{
background: #EABB27;
padding: 40px;
line-height: 1.4;
position: relative;
top: -25px;
}
.my-paragraph-style:before {
content:"!";
position: absolute;
top: 40px;
left: 10px;
color: #fff;
border: 1px solid #fff;
height: 20px;
width: 20px;
text-align: center;
border-radius: 50%
}
Demo
You can tinker with the css as per your liking.
answered Nov 3 '16 at 16:02
Clyde LoboClyde Lobo
7,89452953
add a comment |
1
1
1
CSS
.my-paragraph-style
{
background: #EABB27;
padding: 40px;
line-height: 1.4;
position: relative;
top: -25px;
}
.my-paragraph-style:before {
content:"!";
position: absolute;
top: 40px;
left: 10px;
color: #fff;
border: 1px solid #fff;
height: 20px;
width: 20px;
text-align: center;
border-radius: 50%
}
Demo
You can tinker with the css as per your liking.
answered Nov 3 '16 at 16:02
Clyde LoboClyde Lobo
7,89452953
CSS
.my-paragraph-style
{
background: #EABB27;
padding: 40px;
line-height: 1.4;
position: relative;
top: -25px;
}
.my-paragraph-style:before {
content:"!";
position: absolute;
top: 40px;
left: 10px;
color: #fff;
border: 1px solid #fff;
height: 20px;
width: 20px;
text-align: center;
border-radius: 50%
}
Demo
You can tinker with the css as per your liking.
answered Nov 3 '16 at 16:02
Clyde LoboClyde Lobo
7,89452953
answered Nov 3 '16 at 16:02
Clyde LoboClyde Lobo
7,89452953
answered Nov 3 '16 at 16:02
Clyde LoboClyde Lobo
7,89452953
answered Nov 3 '16 at 16:02
Clyde LoboClyde Lobo
7,89452953
7,89452953
add a comment |
add a comment |
0
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>answered Nov 3 '16 at 16:02
Nenad VracarNenad Vracar
72.4k126083
add a comment |
0
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>answered Nov 3 '16 at 16:02
Nenad VracarNenad Vracar
72.4k126083
add a comment |
0
0
0
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>answered Nov 3 '16 at 16:02
Nenad VracarNenad Vracar
72.4k126083
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>.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>.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>answered Nov 3 '16 at 16:02
Nenad VracarNenad Vracar
72.4k126083
answered Nov 3 '16 at 16:02
Nenad VracarNenad Vracar
72.4k126083
answered Nov 3 '16 at 16:02
Nenad VracarNenad Vracar
72.4k126083
answered Nov 3 '16 at 16:02
Nenad VracarNenad Vracar
72.4k126083
72.4k126083
add a comment |
add a comment |
0
.my-paragraph-style {
background: #EABB27;
padding: 20px 20px 20px 50px;
line-height: 1.4;
color: #fff;
}
.my-paragraph-style:before {
content: '!';
height: 20px;
width: 20px;
display: block;
border: 2px solid red;
border-radius: 50%;
text-align: center;
color: red;
float: left;
margin-left: -35px;
}<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>answered Nov 3 '16 at 16:09
Germano PlebaniGermano Plebani
2,22011631
add a comment |
0
.my-paragraph-style {
background: #EABB27;
padding: 20px 20px 20px 50px;
line-height: 1.4;
color: #fff;
}
.my-paragraph-style:before {
content: '!';
height: 20px;
width: 20px;
display: block;
border: 2px solid red;
border-radius: 50%;
text-align: center;
color: red;
float: left;
margin-left: -35px;
}<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>answered Nov 3 '16 at 16:09
Germano PlebaniGermano Plebani
2,22011631
add a comment |
0
0
0
.my-paragraph-style {
background: #EABB27;
padding: 20px 20px 20px 50px;
line-height: 1.4;
color: #fff;
}
.my-paragraph-style:before {
content: '!';
height: 20px;
width: 20px;
display: block;
border: 2px solid red;
border-radius: 50%;
text-align: center;
color: red;
float: left;
margin-left: -35px;
}<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>answered Nov 3 '16 at 16:09
Germano PlebaniGermano Plebani
2,22011631
.my-paragraph-style {
background: #EABB27;
padding: 20px 20px 20px 50px;
line-height: 1.4;
color: #fff;
}
.my-paragraph-style:before {
content: '!';
height: 20px;
width: 20px;
display: block;
border: 2px solid red;
border-radius: 50%;
text-align: center;
color: red;
float: left;
margin-left: -35px;
}<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>.my-paragraph-style {
background: #EABB27;
padding: 20px 20px 20px 50px;
line-height: 1.4;
color: #fff;
}
.my-paragraph-style:before {
content: '!';
height: 20px;
width: 20px;
display: block;
border: 2px solid red;
border-radius: 50%;
text-align: center;
color: red;
float: left;
margin-left: -35px;
}<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>.my-paragraph-style {
background: #EABB27;
padding: 20px 20px 20px 50px;
line-height: 1.4;
color: #fff;
}
.my-paragraph-style:before {
content: '!';
height: 20px;
width: 20px;
display: block;
border: 2px solid red;
border-radius: 50%;
text-align: center;
color: red;
float: left;
margin-left: -35px;
}<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>answered Nov 3 '16 at 16:09
Germano PlebaniGermano Plebani
2,22011631
answered Nov 3 '16 at 16:09
Germano PlebaniGermano Plebani
2,22011631
answered Nov 3 '16 at 16:09
Germano PlebaniGermano Plebani
2,22011631
answered Nov 3 '16 at 16:09
Germano PlebaniGermano Plebani
2,22011631
2,22011631
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f40406026%2fhow-to-create-a-white-border-circle-having-white-exclamation-mark-inside-a-box-h%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
