質問: #### 目標 横スクロールできるコードの上に、言語名、コピーを指示するテキストのみのみを固定する。 ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/4808cf3652cd0e02b52a62b2a2534349.png) #### 大まかなコード構成 ``` コード ``` ``` .pre { コードを美しく } .pre:before { 言語を表示 ☆ここを固定したい☆ } .言語:before { 言語により言語名・デザインを変更 } @media screen and (min-width: 769px) { .pre:after { コピーを促すテキストを表示 ☆ここを固定したい☆ } } @media screen and (max-width: 768px) { .pre:after { スマホのみのコピーボタンを表示 ☆ここを固定したい☆ } } ``` #### 詳細な情報 * 各テキスト(言語名・コピーボタン・コピーを促すテキスト)は ***content*** を使用して表示 * コードのハイライトにはhighlight.jsを使用 #### やってみたこと ▲を参考に背景をテキストで指定しようとするが、うまくいかず。 #### 実際のサイト(サイト完成次第消去予定) #### 要望 * HTMLをいじりたくない **解決方法がわかる方は教えてください**
回答: wrapしてそちらにボタンを配置してみては?(そのボタンのクリックを pre要素に伝えたければwrapしたdivにイベントを付けて処理)