.code-output {
  border: 2px solid #4CAF50; /* 好みの色と太さに変更可能 */
  padding: 10px;
  border-radius: 5px;
  background-color: #f9f9f9; /* 好みで背景色も変更可能 */
  position: relative; /* relativeを追加して、擬似要素をこの要素内で絶対配置できるようにする */
}

.code-output::before {
  position: absolute;
  top: 10px; /* 文字が見切れないように上端に配置 */
  right: 5px;
  /* font-color: #4CAF50; 文字色を変更可能 */
  /* background-color: #f9f9f9; 擬似要素の背景色を四角の背景色と同じにすることで、重なりを防ぐ */
  padding: 0 5px; /* テキスト周りのパディングを追加して読みやすくする */
  border-radius: 3px; /* 擬似要素にも角を丸めるスタイルを追加 */
  transform: translateY(-50%); /* 擬似要素を垂直方向に中央揃え */
}

.mark {
  background: linear-gradient(transparent 60%, yellow 0%);
}