Create view use html before

Question

I'm a newbie in HTML CSS. I need to create view sample photo:

I used code:

<!DOCTYPE html>
<html>
<head>
<style> 
attachment{
border-radius:10px;
padding:8px;
display:block;
background:#dadada;
}
attachment::before{
content:"</>";
}
</style>
</head>
<body>
<attachment id="7ffdba46c1b64aba89b5176469c2bd5b">Code snippet </br> Text, 12 lines</attachment>
</body>
</html>

But my result is:

How I can move </> to center vertical and all content in attachment tag will alight left </> same photo? Thank you very much!

Par Tha · Accepted Answer · 2019-11-05 06:32:45Z

1

Try this:

<!DOCTYPE html>
<html>
<head>
<style> 

attachment{
border-radius: 10px;
padding: 20px;
display: flex;        /* Newly added */
background: #dadada;
align-items: center; /* Newly added */
line-height:2;      /* Newly added */
}
attachment::before{
content:"</>";
padding: 20px;     /* Newly added */
}

</style>
</head>
<body>
<attachment id="7ffdba46c1b64aba89b5176469c2bd5b">
Code snippet </br> Text, 12 lines
</attachment>
</body>
</html>

edited Nov 5, 2019 at 6:32

answered Nov 5, 2019 at 4:50

Par Tha

1,5418 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hoa.Tran Over a year ago

thank you, but why background:#dadada; not working?

Par Tha Over a year ago

that is due to " // Newly added " sorry i wrongly commented the line. now i updated to " /* Newly added */ "

Carlos Montiel · Accepted Answer · 2019-11-05 04:52:32Z

0

Try:

<body>
<div>
<table>
<tr style="margin-top: 50%; margin=left: 50%;">
<td>
<attachment id="7ffdba46c1b64aba89b5176469c2bd5b">
</td>
<td>
Code snippet </br> Text, 12 lines</attachment>
</td>
</tr>
</table>
</div>
</body>

hope it works!

answered Nov 5, 2019 at 4:52

Carlos Montiel

3011 gold badge4 silver badges17 bronze badges

1 Comment

Hoa.Tran Over a year ago

thank you, but I can't change html, I need change css.

Vishal · Accepted Answer · 2019-11-05 04:58:14Z

0

To move the </> to center vertical, use the following style rules:

attachment::before {
  content:"</>";
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
}

Additionaly you need to add some more tags:

* {
  box-sizing: border-box;
  font-family: sans-serif;
}

.wrapper {
  position: relative;
  border-radius: 10px;
  background: #dadada;
  padding: 0.8em 4em;
  font-size: 1.3em;
}

attachment {
  display:block;
}

attachment::before {
  content:"</>";
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
}

<div class="wrapper">
  <attachment id="7ffdba46c1b64aba89b5176469c2bd5b">
    <p>Code snippet</p>
    <p>Text, 12 lines</p>
  </attachment>
</div>

answered Nov 5, 2019 at 4:58

Vishal

2984 silver badges3 bronze badges

2 Comments

Hoa.Tran Over a year ago

thank you, but I can't change HTML, I need change CSS. I have a solution from Mr.Par tha.

Vishal Over a year ago

Note that display: flex won't work on IE 11 or earlier versions.

Par Tha · Accepted Answer · 2019-11-06 04:33:00Z

0

Add these few CSS in your code. It will help.

<!DOCTYPE html>
<html>
<head>
    <style> 
        attachment {
            border-radius: 10px;
            padding: 8px;
            display: flex;
            background: #dadada;
            line-height: 2;        /* New css */
            align-items: center;   /* New css */
        }
        attachment::before{
            content:"</>";
            padding-right: 20px:   /* New css */
        }
    </style>
</head>
<body>
    <attachment id="7ffdba46c1b64aba89b5176469c2bd5b">Code snippet </br> Text, 12 lines</attachment>
</body>
</html>

edited Nov 6, 2019 at 4:33

Par Tha

1,5418 silver badges10 bronze badges

answered Nov 5, 2019 at 6:08

Swati

4963 silver badges10 bronze badges

Collectives™ on Stack Overflow

Create view use html before

4 Answers 4

2 Comments

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related