How to add a header in top right corner of a textarea like in css tricks-CodePudding

I have made a textarea but I want tomake a header writing "HTML" in the top right corner in small letters like css-tricks.

My code:

<code><pre><textarea rows="16" cols="60" readonly style="resize:none; font-size: 18px;border:8px ridge #ff0000;">
&lt;!DOCTYPE html&gt;
&lt;html lang="en" dir="ltr"&gt;
   &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title>Button Ripple Effect | #Programmer&lt;/title&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;div class="wrapper"&gt;
         &lt;div class="btns"&gt;
            &lt;a href="#"&gt;Button 1&lt;/a&gt;
            &lt;a href="#"&gt;Button 2&lt;/a&gt;
         &lt;/div&gt;
      &lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;
</textarea></pre></code>

CodePudding user response：

You should learn a

I assume that You want to achieve a similar effect like in this snippet:

header {
    display: grid;
    justify-items: end;
}

<!doctype html>
<html lang="en" dir="ltr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Button Ripple Effect | #Programmer</title>
</head>

<body>
<header>
    <span class="logo">HTML</span>
</header>

<div class="wrapper">
    <div class="btns">
        <a href="#">Button 1</a>
        <a href="#">Button 2</a>
    </div>
</div>
</body>
</html>

For future posts please add more info on what did you tried to achieve your goal and maybe add a sketch picture created eg. in Paint or handmade.

CodePudding user response：

Just need a bit of CSS. You may want to use a class selector instead, though.

pre {
    position: relative;
    display: inline-block;
}

pre::before {
    position: absolute;
    top: 10px;
    right: 10px;
    content: "HTML"
 }

<pre><textarea rows="16" cols="60" readonly style="resize:none; font-size: 18px;border:8px ridge #ff0000;">
&lt;!DOCTYPE html&gt;
&lt;html lang="en" dir="ltr"&gt;
   &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title>Button Ripple Effect | #Programmer&lt;/title&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;div class="wrapper"&gt;
         &lt;div class="btns"&gt;
            &lt;a href="#"&gt;Button 1&lt;/a&gt;
            &lt;a href="#"&gt;Button 2&lt;/a&gt;
         &lt;/div&gt;
      &lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;
</textarea></pre>