如何在一段文本的第一行之后添加按钮

Question

I want to have a paragraph where first line will have different font to appear as a title. Just after that text when first line ends I want to have a button to expand the whole message.

I am title BUTTON
This is detailed message which has more width than the first line. I hope you see what I am trying to achieve.

<p>
    I am title.
    This is detailed message which has more width than the first line. I hope you see what I am trying to achieve.
</p>

p::first-line::after {
  content: "BOTTON"
}

Answer 1

Please submit some code. This is all a bit unclear.

But I think you need this:

p::first-line { 
     --your css--
}

Answer 2

 <h1 style="display:inline-block">I am title</h1> <button style="display:inline-block" onclick="showDetails()">Button</button> <p id="details" style="display:none">this is details which has more width that the first line</p> <script> function showDetails(){ document.getElementById("details").style.display = "block"; } </script>